Menu
I am using setTimeout to provide a delay between changing images. The images are changed by looping back through a function.
clearTimeout is used to cancel the setTimeout function.
The problem is that I would also like the initial image (image1.jpg) to be displayed when I’m finished with the looping. I just cannot get this to happen.
The code in RED appears to be ignored. This is the code that would would revert the image back to image1.jpg.
The following code gives an idea of what I’m trying to do. I use a DIV for the button.
Any help would be appreciated.
<html>
<head>
<title>Untitled</title>
<script language=”javascript”>
var buttonStatus;
var currentImage = 1;
var timer;
function Start() {
buttonStatus = 1;
}
function Stop() {
buttonStatus = 0;
EndTimer();
}
function ChangeImage(fileName, imageName, imageNum) {
if (currentImage > imageNum) {
currentImage = 1;
}
image = fileName + currentImage + ‘.jpg’;
document.images(imageName).src = image;
currentImage++;
if (buttonStatus == 1) {
timer = setTimeout(“ChangeImage(‘” + fileName + “‘, ‘” + imageName + “‘, ” + imageNum + “)”, 1000);
}else{
[COLOR=Red]currentImage = 1;
image = fileName + currentImage + ‘.jpg’;
document.images(imageName).src = image;[/COLOR]
}
}
function EndTimer() {
clearTimeout(timer);
}
</script>
</head>
<body>
<div id=”div1″ style=”position: absolute; top: 100px; left: 900px; width: 30px; height: 10px; border: solid;” onMouseOver=”Start()” onClick=”ChangeImage(‘C:/Test/image’, ‘pics’, 5)” onMouseOut=”Stop()”>
</div>
<img src=”image1.jpg” name=”pics”>
</body>
</html>