hey folks

i have the following JS slide show.
the aim is to have a static image display (no changing), until user does a mouse-over it. then it start playing automatically.
onMouseOut, the slideshow should stop, and the image should return to the initial default image.

if possible, there could be a nice fade effect, that i havent managed to get to work.

can anyone take a look at the code and see what might be missing for the above functionality?

thanks!

Code:
<script>
	var iCount = 0;
 
var aImages = new Array();
aImages[0] = 'images/sample/4.jpg';
aImages[1] = 'images/sample/5.jpg';
aImages[2] = 'images/sample/6.jpg';
aImages[3] = 'images/sample/17.jpg';
 
function slideShow(){
   document.slideShowImage.src = aImages[iCount];
  
   iCount ++;
 
  if (iCount >= aImages.length){
      iCount = 0;
	   //setTimeout('slideShow()', 1000);
   }else{
	   slideShowImage.filters.blendTrans.apply();
      setTimeout('slideShow()', 1000);
	  slideShowImage.filters.blendTrans.play();
   }
 
}
 
function slideShowOut(){
	iCount = 3;
}
 
</script>
 
<img  src="images/sample/6.jpg" name="slideShowImage" id="slideShowImage" 
  onmouseover="javascript:slideShow();" 
  onmouseout="javascript:slideShowOut()" 
  style="filter:blendTrans(duration=3)" />