Simple Rollover [single]

一番シンプルなロールオーバー。同一ページ内に複数設置出来ません。

HTML

<div id="rollover">
   <p><img src="http://demo.webtecnote.com/simple-rollover/01.jpg" id="rollover_view" alt="image1" width="415" height="295"></p>
   <ul id="thumb">
       <li><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/01_thumb.jpg" alt="thumb1" width="150" height="45"></a></li>
    <li><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/02_thumb.jpg" alt="thumb2" width="150" height="45"></a></li>
    <li><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/03_thumb.jpg" alt="thumb3" width="150" height="45"></a></li>
    <li><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/04_thumb.jpg" alt="thumb" width="150" height="45"></a></li>
    <li><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/05_thumb.jpg" alt="thumb5" width="150" height="45"></a></li>
    <li><a href="#"><img src="http://demo.webtecnote.com/simple-rollover/06_thumb.jpg" alt="thumb6" width="150" height="45"></a></li>
    </ul>
</div>

CSS

ul,li{ padding:0;margin:0; }

div#rollover {
    height:295px;
    width:580px;
}
div#rollover p {
    float:left;
    margin:0;
}
div#rollover ul {
    float:right;
    width:150px;
    list-style:none;
}
div#rollover li {
    height:50px;
}
div#rollover a img {
    border:0;
}

JavaScript

/**
 * Simple Rollover[single]
 * @author Tenderfeel([email protected])
 * @ver 1.1
 * @HOME http://tenderfeel.xsrv.jp/javascript/271/
 * @license The MIT License
 */
window.onload =function(){
    var myImg = document.getElementById("thumb").getElementsByTagName("img");
    var regrep = "_thumb";
    var newimg = [];
    var  replaceImage = function(e){
        var el = e.target || e.srcElement;
        var href = el.src.replace(regrep,"");
        document.getElementById('rollover_view').src = href;
        if(e.preventDefault){ e.preventDefault(); }
        return false;
    };
    
    for (var i = 0; i <myImg.length; i++) {
        newimg[i] = new Image();
        newimg[i].src = myImg[i].src;
        
        if(myImg[i].addEventListener){
            myImg[i].addEventListener("mouseover", replaceImage, false);
        }else{
            myImg[i].attachEvent("onmouseover", replaceImage);
        }
    }
};