swap_image(): failed

•

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 423,003 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 3,870 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.

Join our community!

Please support our JavaScript / DHTML / AJAX advertiser: Lunarpages Web Hosting

Thread Tools Display Modes

Views: 1164 | Replies: 1

•

Join Date: Jun 2006

Location: UK (Bristol)

Posts: 225

Reputation: Mushy-pea is an unknown quantity at this point

Rep Power: 3

Solved Threads: 1

Mushy-pea

Offline

Posting Whiz in Training

swap_image(): failed

Sep 8th, 2006

Hello everyone. I'm trying to write some Javascript code to make a logo on my website flash periodically between two differently coloured versions (i.e. a simple "swap image - restore image job). Here is a simplified version of what I am attempting, with no loops added yet:

Help with Code Tags

(Toggle Plain Text)

<html>
<head>
<title>Rochfest Preview Portal (RPP)</title>
<script language="javascript" type="text/javascript">
function swap_image()
{
if (flag1 == 1)
{
document.getElementById("img1").src="rochfest-logo2.gif";
}
else if (flag1 == 2)
{
document.getElementById("img1").src="rochfest-logo.gif";
};
}
</script>
</head>
<body>
<p align="center"><img src="rochfest-logo.gif" id="img1"></p>
<script language="javascript" type="text/javascript">
var a = 0; var flag1 = 1;
a = setTimeout("swap_image()", 1000);
flag1 = 2;
a = setTimeout("swap_image()", 1000);
</script>
</body>
</html>

The featured script fails to do anything. I have read some tutorials on w3schools and checked for obvious errors but can't find anything. If anyone can point out my mistake here I would really appriciate it. Thanks.

Steven.

•

Join Date: Sep 2006

Posts: 1

Reputation: kgweb is an unknown quantity at this point

Rep Power: 0

Solved Threads: 0

kgweb

Offline

Newbie Poster

Re: swap_image(): failed

Sep 19th, 2006

•

Originally Posted by Mushy-pea

Hello everyone. I'm trying to write some Javascript code to make a logo on my website flash periodically between two differently coloured versions (i.e. a simple "swap image - restore image job). Here is a simplified version of what I am attempting, with no loops added yet:
Help with Code Tags

(Toggle Plain Text)
<html>
<head>
<title>Rochfest Preview Portal (RPP)</title>
<script language="javascript" type="text/javascript">
function swap_image()
{
if (flag1 == 1)
{
document.getElementById("img1").src="rochfest-logo2.gif";
}
else if (flag1 == 2)
{
document.getElementById("img1").src="rochfest-logo.gif";
};
}
</script>
</head>
<body>
<p align="center"><img src="rochfest-logo.gif" id="img1"></p>
<script language="javascript" type="text/javascript">
var a = 0; var flag1 = 1;
a = setTimeout("swap_image()", 1000);
flag1 = 2;
a = setTimeout("swap_image()", 1000);
</script>
</body>
</html>
<html> <head> <title>Rochfest Preview Portal (RPP)</title> <script language="javascript" type="text/javascript"> function swap_image() { if (flag1 == 1) { document.getElementById("img1").src="rochfest-logo2.gif"; } else if (flag1 == 2) { document.getElementById("img1").src="rochfest-logo.gif"; }; } </script> </head> <body> <p align="center"><img src="rochfest-logo.gif" id="img1"></p> <script language="javascript" type="text/javascript"> var a = 0; var flag1 = 1; a = setTimeout("swap_image()", 1000); flag1 = 2; a = setTimeout("swap_image()", 1000); </script> </body> </html>
The featured script fails to do anything. I have read some tutorials on w3schools and checked for obvious errors but can't find anything. If anyone can point out my mistake here I would really appriciate it. Thanks.

Steven.

Flashing logos on web pages can be very annoying, so you should consider this before using animation. That said, if you want to do it then animated GIFs are much easier and reliable - you should be able to get some free software to enable you to make one.

However, if you are determined to use javascript then it can be done. Just be aware that with more complex effects than you are trying to achieve, setTimeout and image replacement can have strange side-effects and can cause many headaches.

The key to your problem is that the setTimeout function acts asynchronously - that is, your code will keep executing while the delay is occuring. So, in your case the entire code will be completed before the first image substitution is done, but there will only be a fraction of a second between the first and second image replacement, so you will only see the last one.

The solution is to create a function which does the image replacement and then calls setTimeout, which invokes a fuction (the same one with the name of the image file changed) which does image replacement and calls setTimeout, which...... you should get the idea. This will result in an animation which goes on until the user leaves the page. I have not tried to code it for this answer, but in rough pseudo-code:

Help with Code Tags

(Toggle Plain Text)

function animate
      {
      if imagefilename == file1 then imagefilename = file2
      else imagefilename = file1
      do image relacement
      setTimeout ("animate()", 1000)
      }

I think something like that will work - try it and see. Good luck.

Last edited by tgreer : Sep 19th, 2006 at 9:30 am. Reason: added code tags