Simple Rollover[crossfade]

複数設置＋クロスフェード

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;
    position:relative;
}
.rollover .rollover_view {
    position:absolute;
    top:0;
    left:0;
}
.rollover ul {
    float:right;
    width:150px;
    list-style:none;
}
.rollover li {
    height:50px;
}
.rollover a img {
    border:0;
}

JavaScript

/**
 * Simple Rollover[crossfade]
 * @author Tenderfeel([email protected])
 * @ver 1.1
 * @HOME http://tenderfeel.xsrv.jp/javascript/271/
 * @license The MIT License
 */
 
if (typeof window.wtn != 'object'){
    window.wtn = {};
}


(function() {
    wtn.rollover = function(id, view){
        var parent = document.getElementById(id);
        var prev = wtn.getClassName(parent.getElementsByTagName("img"), (view || "rollover_view"));
        var next = new Image();
        next.width = prev.width;
        next.height = prev.height;
        next.className = prev.className;
        next.src = prev.src;
        prev.parentNode.appendChild(next);
        
        var fadePrev = new wtn.fade(prev);
        var fadeNext = new wtn.fade(next,{opacity:0});
        var current = 'prev';
        
        var thumb = wtn.getClassName(parent, 'thumb');
        
        var img = thumb.getElementsByTagName("img");
        var regrep = "_thumb";
        var newimg = [];
        
        var  replaceImage = function(e){
            var el = e.target || e.srcElement;
            var href = el.src.replace(regrep,"");
            if(current=='prev'){
                next.src = href;
                fadeNext.cancel();
                fadePrev.cancel();
                fadePrev.fadeOut();
                fadeNext.fadeIn();
                current='next';
            }else{
                prev.src = href;
                fadeNext.cancel();
                fadePrev.cancel();
                fadePrev.fadeIn();
                fadeNext.fadeOut();
                current='prev';
            }
            if(e.preventDefault){ e.preventDefault(); }
            return true;
        };
        
        for (var i = 0; i < img.length; i++) {
            newimg[i] = new Image();
            newimg[i].src = img[i].src;
            
            if(img[i].addEventListener){
                img[i].addEventListener("mouseover", replaceImage, false);
            }else{
               ...