<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#slider_container {
height: 378px;
width: 647px;
}
#slides {
position:relative;
height: 244px;
width: 647px;
}
#thumbnails {
float: left;
height: 132px;
width: 647px;
}
#thumbnails IMG{
cursor: pointer;
}
.default {
background-Color:green;
}
.active {
background-Color:red;
}
.slide {
position:absolute;
left:0px;
top:0px;
height: 244px;
width: 647px;
}
#thumbnail1 {
float: left;
height: 132px;
width: 152px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #e8e8e8;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #e8e8e8;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #e8e8e8;
padding: 4px;
}
#thumbnail2 {
float: left;
height: 132px;
width: 153px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #e8e8e8;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #e8e8e8;
padding: 4px
}
#thumbnail3 {
float: left;
height: 132px;
width: 152px;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #e8e8e8;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #e8e8e8;
padding: 4px
}
#thumbnail4 {
float: left;
height: 132px;
width: 153px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #e8e8e8;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #e8e8e8;
padding: 4px
}
body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.bold_blue {
font-size: 12px;
font-weight: bold;
color: #3459F5;
padding-top: 5px;
}
.font10 {
font-size: 10px;
color: #3459F5;
}
</style>
<script type="text/javascript">
function zxcFade(o){
var id=o.SlideID,oop=zxcFade['zxc'+id],obj=document.getElementById(id),ms=o.FadeDuration,ms=typeof(ms)=='number'?ms:1000,hold=o.AutoHold,tn=document.getElementById(o.ThumbnailID),tn=tn.childNodes,tary=[],cls=o.ActiveClass,img,divs,z0=0,z1=0;
if (obj&&!oop){
divs=obj.getElementsByTagName('DIV'),lgth=divs.length-1,ary=[];
for (var z0=lgth;z0>=0;z0--){
divs[z0].style.zIndex=z0<lgth?'0':'1';
zxcOpacity(divs[z0],z0<lgth?0:100);
img=tn[z0];
ary.push([divs[z0],z0<lgth?0:100,'dly'+z0]);
}
for (var z1=0;z1<tn.length;z1++){
if (tn[z1].nodeType==1){
tary.push([tn[z1],tn[z1].className+' ']);
if (tary.length==1){
tn[z1].className=tn[z1].className+' '+cls;
}
}
}
zxcFade['zxc'+id]={
id:id,
ary:ary,
tary:tary,
cls:cls,
lgth:ary.length-1,
cnt:0,
ms:ms,
hold:typeof(hold)=='number'?hold:ms*2
}
zxcAuto(id,o.hold);
}
}
function zxcAuto(id,ms){
var o=zxcFade['zxc'+id];
if (o){
o.dly=setTimeout(function(){ zxcGoTo(id,o.cnt+1,true); },o.hold);
}
}
function zxcGoTo(id,nu,auto){
var o=zxcFade['zxc'+id];
if (o&&o.ary[nu]){
clearTimeout(o.dly);
o.auto=auto===true;
if (o.tary[o.cnt][0]){
o.tary[o.cnt][0].className=o.tary[o.cnt][1];
}
ary[o.cnt][0].style.zIndex='0';
clearTimeout(o[o.ary[o.cnt][2]]);
this.animate(o,o.ary[o.cnt],o.ary[o.cnt][1],0,new Date(),o.ms);
o.cnt=nu;
if (o.tary[o.cnt][0]){
o.tary[o.cnt][0].className=o.tary[o.cnt][1]+o.cls;
}
ary[o.cnt][0].style.zIndex='1';
clearTimeout(o[o.ary[o.cnt][2]]);
this.animate(o,o.ary[o.cnt],o.ary[o.cnt][1],100,new Date(),o.ms);
}
}
function animate(o,ary,f,t,srt,mS,auto){
var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
if (isFinite(now)){
zxcOpacity(ary[0],now);
ary[1]=now;
}
if (ms<mS){
o[ary[2]]=setTimeout(function(){ oop.animate(o,ary,f,t,srt,mS,auto); },10);
}
else {
zxcOpacity(ary[0],t);
ary[1]=t;
if (o.auto&&t==100){
if (o.cnt==o.lgth){
o.dly=setTimeout(function(){ zxcGoTo(o.id,0,false); },o.hold);
}
else {
zxcAuto(o.id,o.hold);
}
}
}
}
function zxcOpacity(obj,opc){
obj.style.filter='alpha(opacity='+opc+')';
obj.style.opacity=obj.style.MozOpacity=obj.style.WebkitOpacity=obj.style.KhtmlOpacity=opc/100-.001;
}
window.onload=function(){
zxcFade({
SlideID:'slides',
FadeDuration:1000,
AutoHold:1000,
ThumbnailID:'thumbnails',
ActiveClass:'active'
});
}
</script>
</head>
<body >
<div id="slider_container">
<div id="slides">
<div class="slide" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width="647" height="244"></div>
<div class="slide" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="647" height="244"></div>
<div class="slide" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="647" height="244"></div>
<div class="slide" ><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="647" height="244"></div>
</div>
<div id="thumbnails">
<div id="thumbnail1" class="default" ><img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="151" height="74" onmouseup="zxcGoTo('slides',0);"><div class="bold_blue">Thumbnail title 1</div><div class="font10">description</div></div>
<div id="thumbnail2" class="default" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Two.gif" width="151" height="74" onmouseup="zxcGoTo('slides',1);"><div class="bold_blue">Thumbnail title 2</div></div>
<div id="thumbnail3" class="default" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Three.gif" width="151" height="74" onmouseup="zxcGoTo('slides',2);"><div class="bold_blue">Thumbnail title 3</div></div>
<div id="thumbnail4" class="default" ><img src="http://www.vicsjavascripts.org.uk/StdImages/Four.gif" width="151" height="74" onmouseup="zxcGoTo('slides',3);"><div class="bold_blue">Thumbnail title 4</div></div>
</div>
</div>
</body>
</html>
