setTimeout prevents resetting of image

[TedN]

[peter_budo]

I have to say this script is not clear to me
[HTML][/HTML]
Rest is fine with me

[TedN]

Thanks Peter for replying.

Firstly I should explain that the script shown here was just put togther to demonstrate a problem I am having with a much larger script - one that would be too big to post. If I can find the answer here then I can apply the solution to my main program.
So, to answer your questions I'll explain what this script does in more detail.

In the HTML part I've created a DIV to act as a button:

The DIV has three operations:
1. onMouseOver() selects function Start() which sets variable ButtonStatus = 1.
2. onClick() selects function ChangeImage() which loops through itself via setTimeout().
Each time it loops the image is changed by image = fileName + currentImage + '.jpg';.
The images keep changing on each loop until the last image is reached and then it reverts back to the initial image via:
if (currentImage > imageNum) {
currentImage = 1;
}

This will carry on ad infinitum while the mouse is over the DIV button. When the mouse is moved off the DIV then:
3. onMouseOut() selects function Stop() which sets buttonStatus = 0 which should then apply the code in RED and set the image to the initial image. It doesn't do this!
The Stop() function also selects function EndTimer() to clear the timer.

You mentioned that IMAGE NAME was missing. Actually the image name is included with the path in the argument fileName. A number is added to fileName on each loop thereby changing the image.

If you can make five images avaialble you'll see that the the code actually works. What doesn't happen is that onMouseOut() the image currently displayed does not revert back to the initial image, i.e. image1.jpg. In other words the code in RED is not implemented.

Appreciate any help you can offer.

Thanks,
Ted

[peter_budo]

[TedN]

Thanks Peter.
Your code works fine but unfortunately it won't work in my "real" program. I have a mutitude of DIVs which can be selected, each with their own fileName, imageName and imageNum.
This makes your solution difficult to implement as I need to upload the above values depending on which DIV is clicked.

However, maybe in the very first place I should have asked a very simple question:
How does one put a time delay in a loop?

When I use For() or While() the setTimeout() does not delay the operation of the loop.
That's why I resorted to looping the function itself which caused the original problem.

So is there a simple way of placing a delay in a For() or While() loop or any other loop that doesn't involve looping the function.

Thanks,
Ted

[peter_budo]

[TedN]

Thanks Peter. I will be able to use your solution. I have applied the necessary changes and everything is working OK.

Ted