<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="
http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test_1</title>
<style type="text/css">
#imagefadecontainer {
left: 0px;
overflow: visible;
position: relative;
top: 0px;
height: 200px;
}
#imageFadeContainer img {
display: none;
left: 0px;
position: absolute;
}
</style>
<script type="text/javascript">
/*****
Image Cross Fade Redux
Version 1.0
Last revision: 02.15.2006
steve@slayeroffice.com
Please leave this notice intact.
Rewrite of old code found here:
http://slayeroffice.com/code/imageCrossFade/index.html *****/
window.addEventListener?window.addEventListener("load",so_init,false):window.attachEvent("onload",so_init);
var d=document, imgs = new Array(), zInterval = null, current=0, pause=false;
var fadetime = 3;
var showtime = 5;
function so_init() {
if(!d.getElementById || !d.createElement)return;
imgcontainer = d.getElementById("imageFadeContainer");
if(imgcontainer) {
inputs = imgcontainer.getElementsByTagName("input");
fadetime = inputs[0].value;
showtime = inputs[1].value;
imgs = imgcontainer.getElementsByTagName("img");
for(i=1;i<imgs.length;i++) { imgs[i].xOpacity = 0; }
imgs[0].style.display = "block";
imgs[0].xOpacity = .99;
setTimeout(so_xfade,showtime*1000);
}
}
function so_xfade() {
cOpacity = imgs[current].xOpacity;
nIndex = imgs[current+1]?current+1:0;
nOpacity = imgs[nIndex].xOpacity;
var fadestep = 1.0/((fadetime*1000)/50.0);
cOpacity-=fadestep;
nOpacity+=fadestep;
imgs[nIndex].style.display = "block";
imgs[current].xOpacity = cOpacity;
imgs[nIndex].xOpacity = nOpacity;
setOpacity(imgs[current]);
setOpacity(imgs[nIndex]);
if(cOpacity<=0) {
imgs[current].style.display = "none";
current = nIndex;
setTimeout(so_xfade,showtime*1000);
} else {
setTimeout(so_xfade,50);
}
function setOpacity(obj) {
if(obj.xOpacity>.99) {
obj.xOpacity = .99;
return;
}
obj.style.opacity = obj.xOpacity;
obj.style.MozOpacity = obj.xOpacity;
obj.style.filter = "alpha(opacity=" + (obj.xOpacity*100) + ")";
}
}
</script>
</head>
<body>
<div id="imageFadeContainer">
<input type="hidden" value="3" name="fadevalue" />
<input type="hidden" value="3" name="showvalue" />
<img alt="" src="
http://www.extend.dk/test/130164.gif" />
<img alt="" src="
http://www.extend.dk/test/130165.gif" />
</div>
<br /><br /><br />
</body>
</html>
