/** * 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")); new SimpleRollover($("rollover2")); });
<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" height="45"></a></li> </ul> </div>
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; }