<!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[*/
#tst {
position:absolute;left:100px;top:100px;width:200px;height:200px;border:solid red 1px;text-Align:center;background-Color:#FFFFCC;
}
/*]]>*/
</style>
<script type="text/javascript">
/*<![CDATA[*/
function Swap(img,src){
if (img.name&&!Swap[img.name]){
Swap[img.name]=img.src;
}
if (Swap.lst&&Swap.lst.name&&Swap.lst!=img){
Swap.lst.src=Swap[Swap.lst.name];
}
img.src=src;
Swap.lst=img;
}
var zxcHotel={
init:function(o){
var id=o.ID,nu=o.Display,ms=o.SlideDuration,obj=document.getElementById(id),w=obj.offsetWidth,h=obj.offsetHeight,clds=obj.childNodes,ary=[],z0=0;
obj.style.overflow='hidden';
for (;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
clds[z0].style.position='absolute';
clds[z0].style.left=w+'px';
clds[z0].style.top='0px';
clds[z0].style.width=w+'px';
clds[z0].style.height=h+'px';
ary.push([clds[z0],'dly'+z0]);
}
}
nu=ary[nu]?nu:0;
ary[nu][0].style.left='0px';
this['zxc'+id]={
ary:ary,
w:w,
nu:nu,
ms:typeof(ms)=='number'?ms:1000
}
},
GoTo:function(id,nu){
var o=this['zxc'+id],ud
if (o&&o.ary[nu]&&nu!=o.nu){
ud=nu>o.nu;
clearTimeout(o.ary[o.nu][1]);
this.animate(o,o.ary[o.nu],0,o.w*(ud?-1:1),new Date(),o.ms);
clearTimeout(o.ary[nu][1]);
this.animate(o,o.ary[nu],o.w*(ud?1:-1),0,new Date(),o.ms);
o.nu=nu;
}
},
animate:function(o,ary,f,t,srt,mS){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
ary[0].style.left=now+'px';
}
if (ms<mS){
this[ary[1]]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS); },10);
}
else {
ary[0].style.left=t+'px';
}
}
}
/*]]>*/
</script>
</head>
<body>
<img name="pic1" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="img" width="50" height="50" onmouseup="Swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif');zxcHotel.GoTo('tst',0);" />
<img name="pic2" src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" alt="img" width="50" height="50" onmouseup="Swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif');zxcHotel.GoTo('tst',1);" />
<img name="pic3" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" alt="img" width="50" height="50" onmouseup="Swap(this,'http://www.vicsjavascripts.org.uk/StdImages/Two.gif');zxcHotel.GoTo('tst',2);" />
<div id="tst" >
<div class="hotel" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" alt="img" />
Hotel 1
</div>
<div class="hotel" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt6.jpg" alt="img" />
Hotel 2
</div>
<div class="hotel" >
<img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt7.jpg" alt="img" />
Hotel 3
</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
zxcHotel.init({
ID:'tst', // the unique ID of the parent DIV. (string)
Display:1, //(optional) the initial hotel to display. (number, default = 0)
SlideDuration:500 //(optional) the islide duration in milli seconds. (number, default = 1000)
})
Swap.pic2='http://www.vicsjavascripts.org.uk/StdImages/One.gif';
Swap.lst=document.images.pic2;
/*]]>*/
</script>
</body>
</html>