/**
* Simple Rollover[crossfade]
* @author Tenderfeel(tenderfeel@gmail.com)
* @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 false;
};
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{
img[i].attachEvent("onmouseover", replaceImage);
}
}
};
wtn.getClassName = function(parent, classname){
var elements = parent;
if(!parent.item){
elements = parent.childNodes;
}
for(var i = 0; i < elements.length; i++){
if(elements[i].className == classname){
return elements[i];
}
}
return null;
};
wtn.object = {
marge:function(obj1, obj2){
if(typeof obj2 !== 'object'){
return obj1;
}
for(var i in obj2){
if (obj2.hasOwnProperty(i)) {
obj1[i] = obj2[i];
}
}
return obj1;
}
};
wtn.fade = function(elm, option) {
var defaults = {opacity:1, duration:500, hidden:false};
option = wtn.object.marge(defaults,option);
this.element = elm;
this.hidden = option.hidden;
this.op = option.opacity*100;
this.duration = option.duration/10;
return this;
};
wtn.fade.prototype = {
fadeIn:function(){
var self = this;
if(this.op === 0){this.hidden = false; this.setStyle();}
this.op+=5;
if(this.op<=100){
if(this.op == 100){self.cancel();}
this.setOpacity(this.op);
this.timID = setTimeout((function(){self.fadeIn();}), this.duration);
}
},
fadeOut:function(){
var self = this;
this.op-=5;
if(this.op>=0){
if(this.op===0){ this.hidden = true; this.setStyle();self.cancel();}
this.setOpacity(this.op);
this.timID = setTimeout((function(){self.fadeOut();}), this.duration);
}
},
setStyle:function(){
if(this.hidden){
this.element.style.visibility = "hidden";
this.element.style.display = "none";
}else{
this.element.style.display = "block";
this.element.style.visibility = "visible";
}
},
cancel:function(){
clearTimeout(this.timID);
},
setOpacity:function(op){
this.element.style.filter = 'alpha(opacity=' + (op) + ')';
this.element.style.MozOpacity = op/100;
this.element.style.opacity = op/100;
}
};
})();
window.onload =function(){
wtn.rollover("rollover");
wtn.rollover("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;
}