Start/Stop Timing HELP!

[phpadam]

Here's my full code, but this question is mostly concerning function cycle()

<div id="slideshow">
<div id="main">
<div id="placehold">
</div>
<div id="caption">
</div>
</div>
<div id="roll">
<center>
<img src="1.jpg" id="1" alt="Caption1" style="width:90px;height:60px;opacity:0.5;filter:alpha(opacity=50)"  onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onclick="document.getElementById('main').style.backgroundImage='url(1.jpg)'" />
<img src="2.jpg" id="2" alt="Caption2" style="width:90px;height:60px;opacity:0.5;filter:alpha(opacity=50)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onclick="document.getElementById('main').style.backgroundImage='url(2.jpg)'" />
<img src="3.jpg" id="3" alt="Caption3" style="width:90px;height:60px;opacity:0.5;filter:alpha(opacity=50)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onclick="document.getElementById('main').style.backgroundImage='url(3.jpg)'" />
<img src="4.jpg" id="4" alt="Caption4" style="width:90px;height:60px;opacity:0.5;filter:alpha(opacity=50)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onclick="document.getElementById('main').style.backgroundImage='url(4.jpg)'" />
<img src="5.jpg" id="5" alt="Caption5" style="width:90px;height:60px;opacity:0.5;filter:alpha(opacity=50)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onclick="document.getElementById('main').style.backgroundImage='url(5.jpg)'" />
<img src="6.jpg" id="6" alt="Caption6" style="width:90px;height:60px;opacity:0.5;filter:alpha(opacity=50)" onmouseover="this.style.opacity=1;this.filters.alpha.opacity=100" onmouseout="this.style.opacity=0.5;this.filters.alpha.opacity=50" onclick="document.getElementById('main').style.backgroundImage='url(6.jpg)'" />
</center>
</div>
</div>
<script type="text/javascript">
function cycle() {
var current = document.getElementById("main").style.backgroundImage;
if ( current == '' ) {
var numb = 1;
} 
if ( current == "url(6.jpg)" ) {
var numb = 1;
}
if ( current != '' && current != "url(6.jpg)" ) {
var numb = current.charAt(4);
var numb = parseInt(numb) + 1;
}
var numbstr = "url("+numb+".jpg)";
document.getElementById("main").style.backgroundImage=numbstr;
setTimeout("cycle()", 5000);
}
onload=function (){cycle()};
</script>

 

As you can see, the script cycles between changing the main picture every five seconds.  But when a user clicks on the thumb of that image, the main picture changed as well, yet the script doesn't stop it's rhythm of five seconds, so if a user clicks on a thumbnail at the end of a five second cycle, the picture won't stay up for long.  How would I go about resetting the timer to the beginning of five seconds every time a user selects a thumbnail? I realize I will probably have to get rid of setTimeout as it is, and maybe include a global time interval variable?

 

Help please, thanks in advance.

 

-Adam

[jayjay960]

Try changing

setTimeout("cycle()", 5000);

 

to

timeout = setTimeout("cycle()", 5000);

 

Then to reset it you should be able to do:

clearTimeout(timeout);

timeout = setTimeout("cycle()", 5000);

[Third_Degree]

Thanks for introducing me to clearTimeout()!