when I mouse over a second link, the thumbnail does not fade out, rather it vanishes and the next fades in.
think this is the time between the mouse out and mouseover events
try removing the onmouseout="F.Fade();" on this variation
<!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[*/
#col3 {
position:relative;
}
#col3 IMG {
position:absolute; top:0; left:0; visibility:hidden;
}
/*]]>*/
</style>
<script src="http://www.vicsjavascripts.org.uk/AnimatorBasic/AnimatorBasic.js" type="text/javascript">
// see http://www.vicsjavascripts.org.uk/AnimatorBasic/AnimatorBasic.htm
</script>
<script type="text/javascript">
/*<![CDATA[*/
function Fade(id,ms){
var obj=document.getElementById(id);
var imgs=obj.getElementsByTagName('IMG');
this.imgs=[];
for (var z0=0;z0<imgs.length;z0++){
this.imgs[z0]=zxcBAnimator('opacity',imgs[z0],100,0,0);
this.imgs[z0].Complete=function(){
if (this.data[0]==0){
this.obj.style.visibility='hidden';
}
}
}
this.lst=0;
this.ms=ms||1000
}
Fade.prototype.Fade=function(nu){
this.imgs[this.lst].update([this.imgs[this.lst].data[0],0],this.ms,[0,100]);
if (this.imgs[nu]){
this.lst=nu;
this.imgs[this.lst].obj.style.visibility='visible';
this.imgs[this.lst].update([this.imgs[this.lst].data[0],100],this.ms,[0,100]);
}
}
/*]]>*/
</script>
</head>
<body>
<a class="title" onmouseover="F.Fade(0);" onmouseout="F.Fade();" href="javascript:animatedcollapse.toggle('maclaren')">Maclaren</a>
<a class="title" onmouseover="F.Fade(1);" onmouseout="F.Fade();" href="javascript:animatedcollapse.toggle('ronson')">Ronson</a>
<a class="title" onmouseover="F.Fade(2);" onmouseout="F.Fade();" href="javascript:animatedcollapse.toggle('laser')">Laser</a>
<a class="title" onmouseover="F.Fade(3);" onmouseout="F.Fade();" href="javascript:animatedcollapse.toggle('albert')">Albert Thurston</a>
<a class="title" onmouseover="F.Fade(4);" onmouseout="F.Fade();" href="javascript:animatedcollapse.toggle('pepsi')">Pepsi</a>
<div id="col3">
<img src="http://cargocollective.com/media/22060/porta15_mac1b_o.jpg" width="300" height="200" border="none" />
<img src="http://cargocollective.com/media/22058/porta20_ron1_o.jpg" width="300" height="200" border="none"/>
<img src="http://cargocollective.com/media/22059/porta10_lp1_o.jpg" width="300" height="200" border="none" />
<img src="http://cargocollective.com/media/22059/porta11_lp2_o.jpg" width="300" height="200" border="none" />
<img src="http://cargocollective.com/media/22056/porta7_pep1_o.jpg" width="300" height="200" border="none" />
</div>
<script type="text/javascript">
/*<![CDATA[*/
var F=new Fade('col3',1000);
/*]]>*/
</script>
</body>
</html>