jQueryを使い、マウスオーバーで画像を入れ替える方法

jQueryを使い、マウスオーバーイベント時に画像を入れ替える方法。

jQueryを使わないで作る方法については、「マウスオーバーで画像を入れ替えるJavaScript」もしくは「マウスオーバーで画像を入れ替えるJavaScript(DOM操作)」のページへ。

実装例

実装例(サンプル)の動作について

  1. 画像にマウスのカーソルを合わせると、画像を入れ替える。
  2. 画像からマウスのカーソルを外すと、元の画像に戻す。

ソースコード

JavaScript

<script type="text/javascript">
jQuery( function() {
    var $sampleImg = jQuery( '#sampleImg' );
    $sampleImg.attr( 'src', 'sampleA.png' );
    $sampleImg.mouseover( function () {
        jQuery( this ).attr( 'src', 'sampleB.png' );
    } );
    $sampleImg.mouseout( function () {
        jQuery( this ).attr( 'src', 'sampleA.png' );
    } );
} );
</script>

HTML

<div>
    <img id="sampleImg">
</div>

スポンサード リンク

カテゴリー: API, JavaScript, jQuery, 画像, 逆引き パーマリンク