Blinking image


#1

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?


#2

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>


#3

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


#4

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


#5