Member Avatar for TedN

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{
currentImage = 1;
image = fileName + currentImage + '.jpg';
document.images(imageName).src = image;}
}

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>

  • 2 Contributors
  • 6 Replies
  • 135 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by TedN
Member Avatar for peter_budo

I have to say this script is not clear to me

<script language="javascript">
var buttonStatus;
var currentImage = 1;
var timer;

function Start() {
buttonStatus = 1;
}

This part is fine with me declaration of global plus start of action

function Stop() {
buttonStatus = 0;
EndTimer();
}

Here just after you started you are shuting down all. Why?????

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{
currentImage = 1;
image = fileName + currentImage + '.jpg';
document.images(imageName).src = image;}
}

This is mix up comlitely!!!
Firstly you set up currentImage=1 based on if statement, that is O.K you can do that(you don't have to do this because you set it up global variable on beginning )
Than you have if statement where buttonStatus == 1 do something.
This never happend you already shuted down by use of function Stop, also this is wrong

timer = setTimeout("ChangeImage('" + fileName + "', '" + imageName + "', " + imageNum + ")", 1000);

so it is go to else where you are telling this

image = fileName + currentImage + '.jpg';

which is image = location of images + number of current image + extension jpg;
what is missing is IMAGE NAME

function EndTimer() {
clearTimeout(timer);
}
</script>

Rest is fine with me

Member Avatar for 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:
<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>

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

Member Avatar for peter_budo

O.K. Ted here is something for you :)

<html>
<head>
<title>Untitled</title>

<script language="javascript">
var currentImage = 1;
var timer;

image1 = new Image();                      //string array declared
image1.src = "image1.jpg";                 //declaration of source for array no 1
//images are store in same folder with html document, if in subfolder myimg 
//you will change src so image1.src = "myimg/image1.jpg"

image2 = new Image();                     
image2.src = "image2.jpg";

image3 = new Image();
image3.src = "image3.jpg";

image4 = new Image();
image4.src = "image4.jpg";

image5 = new Image();
image5.src = "image5.jpg";


function ChangeImage() 
{
	if (currentImage > 5)            //check currentImage against no of all images which is 5
		{
			currentImage = 1;
		}
		document.pics.src=eval("image"+currentImage+".src") //display appropriate image according to value of currentImage
		currentImage++;
	
		timer = setTimeout("ChangeImage()", 1000);


}

function Stop ()
{
	currentImage = 1;
	document.pics.src=eval("image"+currentImage+".src")
	clearTimeout(timer);
}
</script>

</head>
<body>

<div id="div1" style="position: absolute; top: 100px; left: 900px; width:30px; 
height: 10px; border: solid;" onMouseOver="ChangeImage()" 
onMouseOut="Stop()">

</div>

<img src="image1.jpg" name="pics">

</body>
</html>

Yesterday I had blackout get mix up some html and C++ stuff :o , but this code above does work on IE6, NN7.2 and MozillaFireFox1.0.4.

As you see I made major changes to your code (also some comments included in code):
- this is based on use of onMouseOver and onMouseOut
- you don't have to send variables to any of the functions
- just have to declare so many string arrays as you need and you have to make change to this if statement "if (currentImage > 5)" if you use different amount of images.

I will be happy to answer any futher questions, if I'm in charge of my mind :cheesy:
Also you should get hold of some new scripting book you coding is little bite out of time (Sorry)

Member Avatar for 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

Member Avatar for peter_budo

I hope this is simple enought for you to understand what is going on in this peace of code and you will be able to do any changes on your own.

For future, please provide as with full scale of problem not part of complex which can't be divided on subtasks.
So here is code, two seperate slideshows, only thing you have to do is to declare your own source images, set the nema for each slideshow, give it starting and ending image.

<html>
<head>
<title>Untitled</title>

<script language="javascript">
var currentImage = 0;
var timer;

image1 = new Image();
image1.src = "image1.jpg";

image2 = new Image();
image2.src = "image2.jpg";

image3 = new Image();
image3.src = "image3.jpg";

image4 = new Image();
image4.src = "image4.jpg";

image5 = new Image();
image5.src = "image5.jpg";

var pics;
var startNo = 0;
var endNo = 0;
function ChangeImage() 
{
	if (currentImage == 0)
		{
			currentImage = startNo;
		}
	if (currentImage > endNo) 
		{
			currentImage = startNo;
		}
		document.images(pics).src=eval("image"+currentImage+".src")
		currentImage++;
		timer = setTimeout("ChangeImage()", 1000);
}

function Stop()
{
	currentImage = startNo;
	document.images(pics).src=eval("image"+currentImage+".src")
	clearTimeout(timer);
	currentImage = 0;
}
</script>

</head>
<body>

<div id="div1" style="position: absolute; top: 100px; left: 900px; width: 30px; height: 10px; border: solid;" 
onMouseOver="pics='pics1';startNo = 1; endNo = 3;ChangeImage()" onMouseOut="pics='pics1'; startNo = 1;Stop()">
</div>
<img src="image1.jpg" name="pics1" id="pics1">
<br>
<br>
<div id="div2" style="position: absolute; top: 600px; left: 900px; width: 30px; height: 10px; border: solid;" 
onMouseOver="pics='pics2'; startNo = 3; endNo = 5; ChangeImage()" onMouseOut="pics='pics2'; startNo = 3;Stop()">
</div>
<img src="image3.jpg" name="pics2" id="pics2">
</body>
</html>

HOPE THIS IS WHAT YOU BEEN LOOKING FOR.

Member Avatar for TedN

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

Ted

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.