ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2020年11月14日| コメントを残す
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

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

メモ:



コメントを残す

コメント