asked on

Javascript image slideshow activated with onMouseOver/Out

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!
i will paste

<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)" />

Open in new window

Michel Plungjan

Here

<script>
        var iCount = 0;
 
var aImages = new Array();
aImages[0] = 'http://static.howstuffworks.com/gif/water-slide-11.jpg';
aImages[1] = 'http://static.howstuffworks.com/gif/water-slide-diagram.gif';
aImages[2] = 'http://static.howstuffworks.com/gif/water-slide-8.jpg';
aImages[3] = 'http://static.howstuffworks.com/gif/family-vacations-blizzard-beach-and-typhoon-lagoon-water-parks-1.jpg';
var tId; 
function slideShow(){
   document.slideShowImage.src = aImages[iCount];
  
   iCount ++;
 
  if (iCount >= aImages.length){
      iCount = 0;
           //setTimeout('slideShow()', 1000);
   }else{
          slideShowImage.filters.blendTrans.apply();
          slideShowImage.filters.blendTrans.play();
          tId=setTimeout('slideShow()', 2000);
 
   }
 
 
}
 
function slideShowOut(){
        iCount = 0;
        document.slideShowImage.src = aImages[iCount];
        clearTimeout(tId)
}
 
</script>
 
<img  src="http://static.howstuffworks.com/gif/water-slide-11.jpg" name="slideShowImage" id="slideShowImage" 
onmouseover="slideShow();" 
onmouseout="slideShowOut()" 
style="filter:blendTrans(duration=3)" />

Open in new window

ASKER CERTIFIED SOLUTION

Michel Plungjan

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

kneidels

ASKER

excellent, thanks!

kneidels

ASKER

hi again

i just rteid it out again - i seem to get a "undefined" image (ie, the image is a red X and right clicking to see properties says undefined)at some point in the lopp when i just leave my mouse over the image.

any ideas?

Thanks!

Michel Plungjan

Not sure - how does your array of images look and the first image you use?

Do you have a URL?