ナビゲーションボタンのロールオーバーなどの効果を付けるときに、
jQueryを使う機会も多いかと思います。
ロールオーバーに関するスクリプトは検索すると多数見つかりますが、

「ボタンをクリックしたときに効果を付ける」

というものが見つからなかったので、自作してみることに。
基本となるスクリプトですが、こちらの記事の

jQueryでロールオーバー！プリロード対応版

を参考にして作成してみました。

$(function(){
    $("img.action").mouseover(function(){
        $(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"))
    }).mousedown(function(){
        $(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/, "$1_push$2"))
    }).mouseout(function(){
        $(this).attr("src",$(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/, "$1$2"));
    }).mouseup(function(){
        $(this).attr("src",$(this).attr("src").replace(/^(.+)_push(\.[a-z]+)$/, "$1$2"));
    }).each(function(){
        $("<img>").attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"))
    })
})

img要素にclass=”action”を指定します。

<img src="sample.png" class="action" />

上記記事と同様にロールオーバー用の画像にsample_on.png、
そしてクリック時用の画像にsample_push.png、
というようにそれぞれファイル名の最後に_on、_pushと付けた画像を用意します。

※なお場合によって不具合がでる場合があるかもしれないので、その点はご注意を。

PHOTOのページを公開しました。
作成にあたってはjQueryのプラグインGalleriaを使用して作成しました。
ただ導入自体はできたんですが、DEMO1のhead部分のスクリプトがうまく動作せず。
そこで、フェード等のエフェクト効果を一から作ってみることに。
続きを読む »

PHOTOのページをjQueryのプラグインを使用して作成しようと考えたんですが、
なぜか効果が適用されず・・・・。
ちょっと検索をしてみたところ、原因が分かりました。

続きを読む »