A text which beats like a heart

Bring your site to life by giving it a heart! This small DHTML program displays and animates a coloured halo around your titles.

Internet

A medium that moves

Place this script on the part of your page where you want the title to appear:

<span id="TexteBat" style="width:100%">
<h1>Your text</h1>
</span>
</center>
<script>
<!--
var from = 4;
var to = 12;
var delay = 55;
var glowColor = "#00FF00";
var i = to;
var j = 0;

textPulseDown();

function textPulseUp()
   {
   if (!document.all)
      return
   if (i < to)
      {
      TexteBat.style.filter = "Glow(Color=" + glowColor + ", Strength=" + i + ")";
      i++;
      theTimeout = setTimeout('textPulseUp()',delay);
      return 0;
      }

   if (i = to)
      {
      theTimeout = setTimeout('textPulseDown()',delay);
      return 0;
      }
   }

function textPulseDown()
   {
   if (!document.all)
      return
   if (i > from)
      {
      TexteBat.style.filter = "Glow(Color=" + glowColor + ", Strength=" + i + ")";
      i--;
      theTimeout = setTimeout('textPulseDown()',delay);
      return 0;
      }
   if (i = from)
      {
      theTimeout = setTimeout('textPulseUp()',delay);
      return 0;
      }
   }
//-->
</script>

You can customise this script as follows:

• Specify the minimum size you want for the halo around the text (from = 4;) and its maximum size (to = 12;).
  
  
• Set the speed at which you want the text to beat (delay = 55;).
  
  
• Specify the colour of the halo (glowColor = "#00FF00";).
  
  
To do this, you can use the colour hexadecimal code or HTML name (blue, lime...).

Discover all Webmaster tips.