マウスオーバーで画像を入れ替える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",
    }
};
window.onload = function () {
    for( var $i = 0; $i < $sampleImgs.length; $i++ ){
        var $sampleImg = document.getElementById( $sampleImgs[$i] );
        $sampleImg.src = $changeImgSettings[$sampleImgs[$i]].onmouseout;
        $sampleImg.onmouseover = function(){
            this.src = $changeImgSettings[this.id].onmouseover;
        };
        $sampleImg.onmouseout = function(){
            this.src = $changeImgSettings[this.id].onmouseout;
        };
    }
}
</script>