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

<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.

  • 2 Contributors
  • 1 Reply
  • 139 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by kgweb
Member Avatar for kgweb

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:

<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:

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.

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.