Blink Image Using Only Scipt

This trick might help you if you want your image to have a blink effect using javascript, I put this for my reference. I'ts very much simple but works very good on my end, here is the code below on how to blink your image using only script.

<!--Script for Blinking Image-->
<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>
<!--End Script for Blinking Image-->

You need to put it before the body tags end on html, or just create a .js file and call it to your main page, and when you have an image that you want to blink just simply put this code inside your img tags(see sample below.

<img src="images/fb-right.png" class="img-fadeIn" alt="" data-pin-nopin="true" id="fire">

id name fire is declared on script code, so you will only put the code inside image tags.

See a sample output on this here. 

Read More