jQueryを使用した基本的な画像のロールオーバー（Rollover）効果

マウスを上げたときの画像が変わるの基本的なJQueryベースのイメージロールオーバー（Rollover）効果を実装する方法です。

同じサイズの画像二つを用意します。 マウスを上げれば、元の表示された画像がフェードアウト（Fade out）され、他の画像がフェードイン（Fade in）され、マウスが画像領域を超えた場合、本来の画像が再び表示されるようしようとします。

次のようなコードを好きなところに追加します。

<img src="before.jpg" data-alt-src="after.jpg">

before.jpgが元の画像であり、after.jpgは、マウスを画像の上に上げたときに表示されるイメージです。

そして、次のようなjQueryコードを使用して画像のロールオーバー効果を実現することができます。

$(document).ready(function(){

$("img").hover(function() {
var temp = $(this).attr("src");
$(this).attr("src", $(this).attr("data-alt-src"));
$(this).attr("data-alt-src", temp);
});
})
// 출처: jqueryscript.net

stackoverflow記事（「Change the image source on rollover using jQuery」）も参照してください。

メモ：

• WordPress(WordPress）でjsスクリプトファイルとスタイルシートを正しくロードする方法