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

<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>