Blinking image

i’m doing some simple effect with js…


<!--html-->
<img src="images/fire.png" id="fire" />

/*css*/
#fire{
position:absolute;top:140px;left:100px;
display:none;
}

//javascript
delay=100;

timer=window.setInterval("blinkImg()",1000);


function blinkImg()
{
f=document.getElementById("fire");
(a) f.style.display="block";
for(i=1;i<delay;i++) // creates delay between blinks
   dummy=0;
(b) f.style.display="none";
}

above code should create blinking image that blinks fast each single time but there is 1000ms betwen separate blinks
but it doesn’t work…but if i interchange lines (a) and (b) then it works(actually f.style.display=“none”; becomes redundent line)

from my attempts to understand what’s going on so far i came to think that there are some optimizations done on my code by js parser…in my case what happens is that only the last instruction is applyed.

am i thinking in the right direction?

Yes, you’re doing good, but I took a little different approach in the following demo. The image is visible for imgOnTime, and hidden for imgOffTime. If the image blinks while it is visible then that is a feature of the image and not of the script.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type='text/css'>
#fire {
  position:absolute;
  top:140px; left:100px;
  visibility:hidden;
}
</style>
<script type='text/javascript'>
var imgId = 'fire';
var imgOnTime = 250;
var imgOffTime = 750;
window.onload = function()
{
  // check for existence of objects we will use
  if (document.getElementById) {
    var ele = document.getElementById(imgId);
    if (ele && ele.style) {
      setTimeout('blinkImg()', imgOffTime);
    }
  }
}
function blinkImg()
{
  var v, t, ele = document.getElementById(imgId);
  if (ele.style.visibility == 'visible') {
    // hide it, then wait for imgOffTime
    v = 'hidden';
    t = imgOffTime;
  }
  else {
    // show it, then wait for imgOnTime
    v = 'visible';
    t = imgOnTime;
  }
  ele.style.visibility = v;
  setTimeout('blinkImg()', t);
}
</script>
</head>
<body>
<p>The image is visible for imgOnTime, and hidden for imgOffTime.</p>
<img src="usflag.jpg" id="fire">
</body>
</html>

thank you
yet i’m very curious why my script doesn’t work…
do you know why??

just implemented your example and now it works beautifully
it is pitty you can see it:)
thanks a lot