<!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" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#parent {
position:relative;width:200px;height:150px;border:solid red 1px;
}
.mask {
position:absolute;z-Index:4;left:0px;top:-50px;width:100%;height:20px;background-Color:#99FFFF;text-Align:center;
/* Moz */
opacity: .5;
/* IE5-7 */
filter: alpha(opacity=50);
/* IE8 */
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
/*]]>*/
</style></head>
<body>
<input type="button" name="" value="GoTo 0" onmouseup="zxcFade.GoTo('tst',0);" />
<input type="button" name="" value="GoTo 1" onmouseup="zxcFade.GoTo('tst',1);" />
<input type="button" name="" value="GoTo 2" onmouseup="zxcFade.GoTo('tst',2);" />
<input type="button" name="" value="GoTo 3" onmouseup="zxcFade.GoTo('tst',3);" />
<br />
<br />
<div id="parent" >
<div class="mask" ><a>My Message</a></div>
<a href="URL1.htm"><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="img" width="200" height="150" border="0"
onmouseover="zxcFade.Pause('tst');"
onmouseout="zxcFade.Auto('tst');"
/></a>
</div>
<br /><br />
<script type="text/javascript">
/*<![CDATA[*/
// Simple Fade Slide Show with image load on demand and pagination and slide in message (09-August-2012)
// by Vic Phillips - http://www.vicsjavascripts.org.uk/
var zxcFade={
init:function(o){
var oop=this,id=o.ParentID,obj=document.getElementById(id),img=obj.getElementsByTagName('IMG')[0],pag=document.getElementById(o.PaginateID),slide=obj.getElementsByTagName('DIV')[0],ary=o.ImageArray,ms=o.FadeDuration,hold=o.HoldDuration,ms=typeof(ms)=='number'?ms:1000,sms=o.SlideDuration,shold=o.SlideHold,ld=o.LoadDuration,clone=document.c reateElement('IMG'),src,z0=0;
obj.style.overflow='hidden';
for (;z0<ary.length;z0++){
ary[z0][2]=new Image();
}
clone.style.position='absolute';
clone.style.zIndex='1';
clone.style.left='-3000px';
clone.style.top='-3000px';
obj.appendChild(clone);
this['zxc'+id]={
id:id,
ary:o.ImageArray,
clone:clone,
img:img,
a:img.parentNode,
pag:pag?pag.getElementsByTagName('*'):[],
lst:0,
ms:ms,
hold:typeof(hold)=='number'?hold:ms*4,
ld:typeof(ld)=='number'?ld*1000:5000,
cnt:0,
slide:slide
}
clone.onmouseover=function(){ oop.Pause(id); }
clone.onmouseout=function(){ oop.Auto(id); }
if (slide){
setTimeout(function(){ oop.animate(o,slide,slide.offsetTop,0,new Date(),typeof(sms)=='number'?sms:1000,'dly2'); },typeof(shold)=='number'?shold:1000);
}
this.Auto(id,o.hold);
},
Auto:function(id,ms){
var o=this['zxc'+id],oop=this;
if (o){
o.to=setTimeout(function(){
o.cnt=++o.cnt%o.ary.length;
o.auto=true;
oop.rotate(o);
},ms||200);
}
},
Pause:function(id){
var o=this['zxc'+id];
if (o){
o.auto=false;
clearTimeout(o.to);
}
},
GoTo:function(id,nu){
var o=this['zxc'+id];
if (o){
this.Pause(o.id);
if (o.ary[nu]&&nu!=o.cnt){
o.cnt=nu;
this.rotate(o,false);
}
}
},
rotate:function(o){
this.opac(o.clone,0);
if (o.ary[o.cnt][2].width<40){
o.ary[o.cnt][2].src=o.ary[o.cnt][0];
this.load(o,new Date());
return;
}
o.clone.src=o.ary[o.cnt][0];
this.ready(o);
},
ready:function(o){
var oop=this;
clearTimeout(o.dly);
if (o.pag[o.lst]){
o.pag[o.lst].className='';
}
if (o.pag[o.cnt]){
o.pag[o.cnt].className='active';
}
o.lst=o.cnt;
this.animate(o,null,0,100,new Date(),o.ms,'dly');
o.clone.style.left=o.img.offsetLeft+'px';
o.clone.style.top=o.img.offsetTop+'px';
o.clone.style.width=o.img.width+'px';
o.clone.style.height=o.img.height+'px';
o.a.removeAttribute('href');
if (o.ary[o.cnt][1]){
o.a.href=o.ary[o.cnt][1];
}
},
load:function(o,d){
var oop=this;
if (o.ary[o.cnt][2].width<40&&new Date()-d<o.ld){
o.to=setTimeout(function(){ oop.load(o,d); },100);
return;
}
if (o.ary[o.cnt][2].width<40){
o.ary.splice(o.cnt,1);
o.cnt=o.ary[o.cnt]?o.cnt:0;
}
this.rotate(o);
},
animate:function(o,slide,f,t,srt,mS,to){
var oop=this,obj=o.clone,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
if (!slide){
oop.opac(obj,now);
}
else {
slide.style.top=now+'px';
}
}
if (ms<mS){
o[to]=setTimeout(function(){ oop.animate(o,slide,f,t,srt,mS,to); },10);
}
else {
if (slide){
slide.style.top=t+'px';
}
else {
o.img.src=obj.src;
obj.style.left='-3000px';
if (o.auto){
this.Auto(o.id,o.hold);
}
}
}
},
opac:function(obj,now){
obj.style.filter='alpha(opacity='+now+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=now/100-.001;
}
}
zxcFade.init({
ParentID:'parent', // the unique ID name of the parent DIV. (string)
ImageArray:[ // an array defining the slide show images and link hrefs. (array)
// field 0 = the image src. (string)
// field 1 = (optional) the image link href. (string,default = no link href)
['http://www.vicsjavascripts.org.uk/StdImages/One.gif','URL1.htm'],
['http://www.vicsjavascripts.org.uk/StdImages/Two.gif','URL2.htm'],
['http://www.vicsjavascripts.org.uk/StdImages/Three.gif','URL3.htm'],
['http://www.vicsjavascripts.org.uk/StdImages/Four.gif','URL4.htm']
],
LoadDuration:5, //(optional) the time allowed to load the images seconds. (number), default = 5)
FadeDuration:1500, //(optional) the fade duration im illi seconds. (number), default = 1000)
HoldDuration:2000, //(optional) the auto rotate hold duration im illi seconds. (number), default = 1000)
SlideDuration:1000, //(optional) the auto rotate hold duration im illi seconds. (number), default = 1000)
SlideHold:2000 //(optional) the auto rotate hold duration im illi seconds. (number), default = 1000)
});
/*]]>*/
</script>
</body>
</html>