Simple Rollover[MooTools]

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...

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[MooTools]
 * @author Tenderfeel([email protected])
 * @ver 1.0
 * @HOME http://tenderfeel.xsrv.jp/javascript/271/
 * @license The MIT License
 */
(function($){
    this.SimpleRollover = new Class({
        Implements:[Options],
        options:{
           viewImg: '.rollover_view',
           regrep:'_thumb',
           delay:500
        },
        
        initialize:function(element, options){
            this.setOptions(options);
            this.element = element;
            this.current = 'prev';
            this.prev = this.element.getElement(this.options.viewImg);
            this.thumb = this.element.getElements('img[src*='+this.options.regrep+']');
            this.next = new Element('img.next').fade('hide');
            this.next.inject(this.prev.getParent());
            this.attach();
        },
        attach:function(){
            var self = this;
           this.prev.set('tween',{onComplete:function(){this.current = 'prev';this.next.fade('hide');}.bind(this)});
            this.next.set('tween',{onComplete:function(){this.current = 'next';this.prev.fade('hide');}.bind(this)});
            
            this.thumb.each(function(el,i){
                el.addEvent('mouseover', function(e){
                    var src = this.src.replace(self.options.regrep, "");
                    
                    if(self.current === 'prev'){
                        self.next.src = src;
                        self.next.setStyle('z-index',1);
                        self.prev.setStyle('z-index',0);
                        self.next.fade(1);
                    }else{
                        self.prev.src = src;
                        self.prev.setStyle('z-index',1);
                        self.next.setStyle('z-index',0);
                        self.prev.fade(1);
                    }
                });
            });
        }
    });

})(document.id);

window.addEvent("domready",function(){
    new SimpleRollover($("rollover"));
 ...