jQueryを使い、マウスオーバーで画像を入れ替える(複数画像対応)

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

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

実装例

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

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

ソースコード

JavaScript

<script type="text/javascript">
var $sampleImgs = [ 'sampleImg1', 'sampleImgRed', 'sampleImgBlue' ];
var $changeImgSettings = {
    sampleImg1: {
        onmouseover: "sampleA1.png",
        onmouseout: "sampleA2.png",
    },
    sampleImgRed: {
        onmouseover: "sampleB1.png",
        onmouseout: "sampleB2.png",
    },
    sampleImgBlue: {
        onmouseover: "sampleC1.png",
        onmouseout: "sampleC2.png",
    }
};
jQuery( function() {
    for( var $i = 0; $i < $sampleImgs.length; $i++ ){
        var $sampleImg = jQuery( '#' + $sampleImgs[$i] );
        $sampleImg.attr( 'src', $changeImgSettings[$sampleImgs[$i]].onmouseout );
        $sampleImg.mouseover( function () {
            jQuery( this ).attr( 'src', $changeImgSettings[jQuery( this ).attr( 'id' )].onmouseover );
        } );
        $sampleImg.mouseout( function () {
            jQuery( this ).attr( 'src', $changeImgSettings[jQuery( this ).attr( 'id' )].onmouseout );
        } );
    }
} );
</script>

HTML

<div>
    <img id="sampleImg1">
    <img id="sampleImgRed">
    <img id="sampleImgBlue">
</div>

スポンサード リンク

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