マウスを上げたときの画像が変わるの基本的な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」)も参照してください。
コメントを残す