Slow Pulse Image

Sometimes you need to attract attention — without rudely interrupting the site visitor, getting in their face.

A small movement can do the trick, something that attracts attention when attention isn't focused elsewhere.

(stop)

An image with a pulse can provide the small movement. Like the example on the right. Every second, the image either grows 2 pixels bigger or shrinks by 2 pixels.

The reason for the 2 pixels (instead of 1 pixel) size adjustment is to keep the image centered on itself. The image shifts its position 1 pixel left and up when it gets larger by 2 pixels. And the reverse when the size is adjusted smaller.

Here's the source code of the example. Information follows.

<div style="position:relative; height:54px; width:54px;">
<img 
   id="an-image" 
   src="//www.willmaster.com/images/wmlogo_icon.gif" 
   style="position:absolute; left:2px; top:2px; width:50px; height:50px;" 
   alt="Willmaster.com logo">
</div>

<script>
var imageID = "an-image";
var pulseInterval = 1; // Number of seconds, decimal number acceptable.
var originaltop = "2px";
var originalleft = "2px";
var originalwidth = "50px";
var originalheight = "50px";
var smallertop = "3px";
var smallerleft = "3px";
var smallerwidth = "48px";
var smallerheight = "48px";
function Pulse()
{
   var img = document.getElementById(imageID);
   if( parseInt(img.style.width) == parseInt(originalwidth) )
   {
      img.style.top = smallertop;
      img.style.left = smallerleft;
      img.style.width = smallerwidth;
      img.style.height = smallerheight;
   }
   else
   {
      img.style.top = originaltop;
      img.style.left = originalleft;
      img.style.width = originalwidth;
      img.style.height = originalheight;
   }
}
var interval = setInterval(Pulse,parseInt(pulseInterval*1000));
function stopAnimation() { clearInterval(interval); }
</script>

<p>
<a href="javascript:stopAnimation()">(stop)</a>
</p>

The code with an aqua background color at the beginning of the source code and with a beige background color at the end of the source code is HTML and the rest is JavaScript.

In the aqua background color area is a div with an image. The div's style is position:relative; and its dimensions are a couple pixels larger than the image to help position the example. The example dimensions don't need to be adhered to in your implementation. Unless needed for positioning or other reason, dimensions aren't required.

The image in that div has an id value (colored blue). The same an-image id value is specified in the JavaScript so the JavaScript knows which image to manipulate.

On the next line of the JavaScript (colored green) is where you specify the number of seconds for the pulse interval, which may be a decimal number. The example has an interval of 1 second.

The next four lines (colored red) is where the original image position and dimensions are specified, the position and size when the page is first loaded. It would be the same as specified for the image in the HTML code above the JavaScript.

The four lines following those (colored brown) is where the image position and dimensions are specified for the smaller version of the image. Use this table to determine the position and dimensions for the smaller version values.

Doing it that way will keep the image centered on itself while it pulses.

The HTML at the bottom of the source code with the beige background color is optional. It provides a link to stop the image pulse for those who find it annoying.

That's the source code for the pulsing image. It should gently get attention when attention isn't otherwise occupied.

(This article first appeared in Possibilities ezine.)

Will Bontrager