Web制作メモ -トップへ-

[jQuery] マウスホバーで画像をロールオーバーする方法

JavaScript2015.02.08 15:09

jQueryで画像をロールオーバーするにはattr()を使います。

attr()でIMG画像のsrc属性を変更することが出来ます。

attr()でsrc属性を書き換えれば、それだけでページ上の画像が変更されます。

画像のロードや表示といった処理は特に必要ありません。

そのような処理はjQueryかブラウザのどちらかが自動的にやってくれます。

jQueryでマウスホバー

下記は、.swapというクラスの画像をマウスオーバーで書き換えるコードです。

最初に表示する画像は末尾に_offが付いた画像とし、マウスが画像の上に乗ると、_offを_onに書き換えています。

その為、サーバー上には_offの付く画像と共に_onの付く画像も予めアップロードしておく必要があります。

マウスイベントは、mouseenter(マウスが画像の範囲に入った時)とmouseleave(マウスが画像の範囲から離れた時)を使います。

jQueryで画像のロールオーバー

$(document).on("mouseenter", ".swap", function(){
    $(this).attr("src", $(this).attr("src").replace("_off", "_on"));
});
$(document).on("mouseleave", ".swap", function(){
    $(this).attr("src", $(this).attr("src").replace("_on", "_off"));
});

jQueryで画像のプリロード

上記の方法でロールオーバーする場合、_offの付く画像は最初のロード時にブラウザにダウンロードされますが、_onの付く画像はダウンロードされません。

その為、マウスホバーした時点でロード処理が走り若干のちらつきが発生します。

ちらつきを防止するには、最初のページのロード時に_onの付く画像をロードしておきます。

これを画像のプリロード(使用前に事前にダウンロードしておく事) と言います。

jQueryで画像をプリロードするには、imgタグを使います。

タグというのがポイントで、セレクタと混同しないように注意が必要です。

imgをセレクタで指定する場合は$("img")と記述しますが、タグを記述する場合は$("<img>")というように<>を付けて記述します。

jQueryで画像のプリロード

$("<img>").attr("src", "test_on.png");

画像がプリロードされているか確認する方法

画像がプリロードされているか確認するには、Google Chromeのデベロッパーツールを使います。

Ctrl+Shift+Jでデベロッパーツールが起動するので、Networkを選択し、その後、ページを再読み込みします。

Networkを選択した後、再読み込みが必要というのがポイントです。

再読み込みすると、ロードされたファイルが表示されます。

プリロードされていない場合だと以下のように表示されます。

プリロードしていない

プリロードに成功すれば、以下のように_onの付いた画像も表示されます。

プリロード成功

initiator(ロードを実行したプログラム)はjQueryとなります。

jQueryでプリロードするメリット

メリットはずばり、jQueryが使えない場合はプリロードされないということです。

ロールオーバーをjQuery、プリロードはHTML、など異なる方法で実装すると、jQueryの動かない環境の場合、使用しないプリロード画像をダウンロードしてしまうことになります。

ロールオーバーをjQueryで実装した場合は、jQueryでプリロード。CSSでロールオーバーする場合はHTMLでプリロード。と同じ方法で実装すれば無駄がありません。

画像の自動プリロード

プリロードする画像をその都度記述するのはメンテナンス性が悪いので、_offの付く画像だった場合、_onの付く画像を自動的にプリロードするようにしてみます。

下記のコードは、ファイル名が_offで終わるimg要素の場合、_onの付く画像を自動的にプリロードします。

画像の自動プリロード

$("img").each(function(){
    if($(this).attr("src").match(/_off.(.*)$/)){
        $("").attr("src", $(this).attr("src").replace(/_off.(.*)$/,"_on.$1"));
    }
});

each()は要素ごとに処理を行う指定です。

match()では拡張子の直前が_offで終わるか判定しています。

正規表現で$は行末の意味で、/はデリミタと言って正規表現の前後に付ける目印です。

replace()の$1は正規表現の変数で第一引数で中括弧で囲んだ値(拡張子)を受け取っています。