•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the JavaScript / DHTML / AJAX section within the Web Development category of DaniWeb, a massive community of 426,324 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 2,297 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting
Views: 2918 | Replies: 6
 |
•
•
Join Date: Jun 2005
Posts: 7
Reputation: 
Rep Power: 0
Solved Threads: 0
Newbie Poster
setTimeout prevents resetting of image 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>
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>
•
•
Join Date: Dec 2004
Location: London or Slovakia
Posts: 2,455
Reputation:
Rep Power: 11
Solved Threads: 296
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
[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
Learn to see in another's calamity the ills which you should avoid.
Publilius Syrus
(~100 BC)
If we helped you to solve your problem, answered your question please mark your post as SOLVED.
Publilius Syrus
(~100 BC)
If we helped you to solve your problem, answered your question please mark your post as SOLVED.
•
•
Join Date: Jun 2005
Posts: 7
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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
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
•
•
Join Date: Dec 2004
Location: London or Slovakia
Posts: 2,455
Reputation:
Rep Power: 11
Solved Threads: 296
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)
[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)
Learn to see in another's calamity the ills which you should avoid.
Publilius Syrus
(~100 BC)
If we helped you to solve your problem, answered your question please mark your post as SOLVED.
Publilius Syrus
(~100 BC)
If we helped you to solve your problem, answered your question please mark your post as SOLVED.
•
•
Join Date: Jun 2005
Posts: 7
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
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
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
•
•
Join Date: Dec 2004
Location: London or Slovakia
Posts: 2,455
Reputation:
Rep Power: 11
Solved Threads: 296
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.
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.
Learn to see in another's calamity the ills which you should avoid.
Publilius Syrus
(~100 BC)
If we helped you to solve your problem, answered your question please mark your post as SOLVED.
Publilius Syrus
(~100 BC)
If we helped you to solve your problem, answered your question please mark your post as SOLVED.
|
•
•
•
•
•
•
•
•
DaniWeb JavaScript / DHTML / AJAX Marketplace
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
Linear Mode
- swap_image(): failed (JavaScript / DHTML / AJAX)
- rotate pictures in a mapped image space? (HTML and CSS)
- Image capture into HTML/IE and Oracle databases... (Oracle)
Other Threads in the JavaScript / DHTML / AJAX Forum
- Previous Thread: calculating dynamic field names
- Next Thread: How can fix the problem?
