Simple Rollover[multiple]

同一ページ内に複数設置可能。

HTML

<div id="rollover" class="rollover">
   <p><img src="http://demo.webtecnote.com/simple-rollover/01.jpg" class="rollover_view" alt="image1" width="415" height="295"></p>
   <ul class="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>
 
 <div id="rollover2" class="rollover">
   <p><img src="http://demo.webtecnote.com/simple-rollover/01.jpg" class="rollover_view" alt="image1" width="415" height="295"></p>
   <ul class="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"...

CSS

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

JavaScript

/**
 * Simple Rollover[multiple]
 * @author Tenderfeel([email protected])
 * @ver 1.2
 * @HOME http://tenderfeel.xsrv.jp/javascript/271/
 * @license The MIT License
 */
function Rollover(id, view){
    var parent = document.getElementById(id);
    
    var getViewImg = function(img, classname){
        for(var i = 0; i < img.length; i++){
            if(img[i].className == classname){
                return img[i];
            }
        }
        return null;
    };
    
    var myImg = parent.getElementsByTagName("img");
    view = view || "rollover_view";
    
    var viewEl = getViewImg( myImg, view);
    var regrep = "_thumb";
    var newimg = [];
    
    var  replaceImage = function(e){
        var el = e.target || e.srcElement;
        var href = el.src.replace(regrep,"");
        viewEl.src=href;
        if(e.preventDefault){ e.preventDefault(); }
        return false;
    };
    
    for (var i = 1; 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);
        }
    }
}

window.onload = function(){
    Rollover("rollover",'rollover_view');
    Rollover("rollover2",'rollover_view');
};