How can I add an event to an automated rotating image?

Question

I'm using the following script and the later onclick-event. If I use the onclick my rotating banner loses it and starts displaying pictures at random intervals. I think I should override the "setTimeout" at the end of the first piece of code. Question is how exactly?

<script language="JavaScript" type="text/javascript">
<!--
var RotatingImage1_Index = -1;
var RotatingImage1_Images = new Array();
RotatingImage1_Images[0] = ["images/ban_image1.png","",""];
<!-- 15 Images in total-->
RotatingImage1_Images[14] = ["images/ban_image2.png","",""];

function RotatingImage1ShowNext(){
RotatingImage1_Index = RotatingImage1_Index + 1;
   if (RotatingImage1_Index > 14)
   RotatingImage1_Index = 0;
   eval("document.RotatingImage1.src = RotatingImage1_Images[" + RotatingImage1_Index + "][0]");
   setTimeout("RotatingImage1ShowNext();", 4000);}
// -->
</script>
<img src="images/ban_image1.png" id="ban_img1" name="RotatingImage1">

This part works as it should.

<div id="ban_next" align="left">
<a href="#" onclick="RotatingImage1ShowNext();return false;">
<img src="images/ban_next.png" id="ban_nxt1"></a></div>

This part works as well, but only correctly if I set the 'setTimeout' to '0'. I am sorry, I'm compleatly new to this. I was looking at this stackoverflow.com question, but I don't know how to implement that here.

I thank you in advance.

Edit: The rotating image starts automaticly. It displays a new image every 4 seconds. The images have text on them, or better insider jokes. Readers should be tempted to read them, but if the automated rotation cought there antention, the have to keep that antention for a full minute to see all images. That's probably to long. So I thought to implement a button to overwrite the timer and show the next image 'on click'. But after the click the rotation-time should turn back to auto-rotation. That's the plan.

Thank you Prusse, for now it bedtime, I will try to grasp your answer tomorrow ;)

Answer 1

You don't need eval, just do document.RotatingImage1.src = RotatingImage1_Images[RotatingImage1_Index][0].

The described behavior happens because there is more then one timer firing. There is one set on the first time RotatingImage1ShowNext is called, more one each time its called from your onclick handler. To fix this declare a global for your timer and before another timeout is set clear it if set. Like:

var global_timerid;
function RotatingImage1ShowNext(){
  //RotatingImage1_Index = RotatingImage1_Index + 1;
  //if (RotatingImage1_Index > 14) RotatingImage1_Index = 0;
  RotatingImage1_Index = (RotatingImage1_Index + 1) % RotatingImage1_Images.length;
  //document.RotatingImage1.src = RotatingImage1_Images[RotatingImage1_Index][0];
  document.getElementById('ban_img1').src = RotatingImage1_Images[RotatingImage1_Index][0];
  if (global_timerid) clearTimeout(global_timerid);
  global_timerid = setTimeout(RotatingImage1ShowNext, 4000);
}