AJAX

swap_image(): failed

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: Jun 2006

Posts: 263

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

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 
 JavaScript / DHTML / AJAX Syntax (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.

•

Join Date: Sep 2006

Posts: 1

Reputation: kgweb is an unknown quantity at this point

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

JavaScript / DHTML / AJAX Syntax (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 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
function animate
      {
      if imagefilename == file1 then imagefilename = file2
      else imagefilename = file1
      do image relacement
      setTimeout ("animate()", 1000)
      }
function animate
      {
      if imagefilename == file1 then imagefilename = file2
      else imagefilename = file1
      do image relacement
      setTimeout ("animate()", 1000)
      }