Slideshow stop on mouseover start on mouseout

[maarten2002]

Hi people,

I am quite new to JS-scripting and I have a question.
Finally I found a "good" slideshow which works in IE, Chrome, FF with prototype.

The only thing is that I would like the slideshow to stop when the mouse is over the slideshow and start again when the pointer leaves the pics.

Thanks alot in advance!

Already found something, but don't know how to implement it:

------
myTimer = setTimeout(.... .........)

onmouseover = clearTimeout(my Timer)
onmouseout = fadeInOut();

-------
script:
-------

var delay = 4000;
var start_frame = 0;

function init() {
	var lis = $('slide-images').getElementsByTagName('li');
	
	for( i=0; i < lis.length; i++){
		if(i!=0){
			lis[i].style.display = 'none';
		}
	}
	end_frame = lis.length -1;
	
	start_slideshow(start_frame, end_frame, delay, lis);
}

function start_slideshow(start_frame, end_frame, delay, lis) {
	setTimeout(fadeInOut(start_frame,start_frame,end_frame, delay, lis), delay);
}

function fadeInOut(frame, start_frame, end_frame, delay, lis) {
	return (function() {
		lis = $('slide-images').getElementsByTagName('li');
		Effect.Fade(lis[frame]);
		if (frame == end_frame) { frame = start_frame; } else { frame++; }
		lisAppear = lis[frame];
		setTimeout("Effect.Appear(lisAppear);", 0);
		setTimeout(fadeInOut(frame, start_frame, end_frame, delay), delay + 1850);
	})
}

Event.observe(window, 'load', init, false);

-------
HTML:
-------

<head>
	<script type="text/javascript" src="/libraries/prototype/prototype.js"></script>
	<script type="text/javascript" src="/libraries/simple-slide-show.js"></script>
</head>

...

<div id="slide-show">
<ul id="slide-images">

<li><a href="/">
<img src="/template/images/new2/slider/slider1.png" alt="Target Link 1" />
</a></li>

<li><a href="/">
<img src="/template/images/new2/slider/slider2.png" alt="Target Link 2" />
</a></li>

<li><a href="/">
<img src="/template/images/new2/slider/slider3.png" alt="Target Link 3" />
</a></li>

</ul>
</div>

[Dormilich]

I’m not familiar with prototype, though I noticed

    for( i=0; i < lis.length; i++){
        if(i!=0){
            lis[i].style.display = 'none';
        }
    }

why not starting with 1 instead explicitly checking for 0?

// the somewhat strange looking first term is used to speed up the loop
// because you calculate the length only once
    for( var l, [B]i=1[/B], l=lis.length; i<l; i++){
        lis[i].style.display = 'none';
     }