Simple Rollover [single]

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

by Tenderfeel

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="thumb4" 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.0
 * @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 = new Array();
    for (var i = 0; i <myImg.length; i++) {
        newimg[i] = new Image();
        newimg[i].src = myImg[i].src;
        myImg[i].onmouseover =function() {
            var href = this.src.replace(regrep,"");
                document.getElementById('rollover_view').src=href;
        }
    }
}