944,146 Members | Top Members by Rank

Web Development > JavaScript / DHTML / AJAX > setTimeout prevents resetting of image
Ad:
Permalink
Jun 23rd, 2005
0

setTimeout prevents resetting of image

Expand Post »
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>
Similar Threads
Reputation Points: 10
Solved Threads: 0
Newbie Poster
TedN is offline Offline
7 posts
since Jun 2005
Permalink
Jun 24th, 2005
0

Re: setTimeout prevents resetting of image

I have to say this script is not clear to me
[HTML]<script language="javascript">
var buttonStatus;
var currentImage = 1;
var timer;

function Start() {
buttonStatus = 1;
}
[/HTML]
This part is fine with me declaration of global plus start of action

[HTML]function Stop() {
buttonStatus = 0;
EndTimer();
}[/HTML]
Here just after you started you are shuting down all. Why?????

[HTML]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;}
}[/HTML]
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

[HTML]function EndTimer() {
clearTimeout(timer);
}
</script>[/HTML]
Rest is fine with me
Moderator
Featured Poster
Reputation Points: 2786
Solved Threads: 874
Code tags enforcer
peter_budo is offline Offline
6,659 posts
since Dec 2004
Permalink
Jun 24th, 2005
0

Re: setTimeout prevents resetting of image

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
Reputation Points: 10
Solved Threads: 0
Newbie Poster
TedN is offline Offline
7 posts
since Jun 2005
Permalink
Jun 25th, 2005
0

Re: setTimeout prevents resetting of image

O.K. Ted here is something for you
[html]<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>[/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)
Moderator
Featured Poster
Reputation Points: 2786
Solved Threads: 874
Code tags enforcer
peter_budo is offline Offline
6,659 posts
since Dec 2004
Permalink
Jun 25th, 2005
0

Re: setTimeout prevents resetting of image

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
Reputation Points: 10
Solved Threads: 0
Newbie Poster
TedN is offline Offline
7 posts
since Jun 2005
Permalink
Jun 27th, 2005
0

Re: setTimeout prevents resetting of image

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]<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>[/HTML]

HOPE THIS IS WHAT YOU BEEN LOOKING FOR.
Moderator
Featured Poster
Reputation Points: 2786
Solved Threads: 874
Code tags enforcer
peter_budo is offline Offline
6,659 posts
since Dec 2004
Permalink
Jun 28th, 2005
0

Re: setTimeout prevents resetting of image

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

Ted
Reputation Points: 10
Solved Threads: 0
Newbie Poster
TedN is offline Offline
7 posts
since Jun 2005

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.
Message:
Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: what do you use?
Next Thread in JavaScript / DHTML / AJAX Forum Timeline: How can fix the problem?





About Us | Contact Us | Advertise | Acceptable Use Policy
Forum Index | Build Custom RSS Feed


Follow us on Twitter


© 2011 DaniWeb® LLC