Dynamic Drive- Glowing Text Script

New Revised CSS Library Forums Web Tools

Glowing Text Script

Author: Dynamic Drive

Description: Add flare and draw attention to important text on your page by making them glow! The below script utilizes the glow filter of DHTML to first surround any text with a yellow "light", then uses scripting to make the light "come alive" and glow (look closely...the light is actually moving!). Poor folks not using IE 4+ will simply see the text in its usual, dull state.

Demo: This is a glowing link!
This is a glowing text

Try using the above script on a page with black background and white text; it'll fit the Halloween mood quite nicely! (For reference in the future, this page was created near the advent of Halloween :-)

Directions

Step 1: Insert the below into the <head> section of your page:

Select All
<style>  </style> <script language="JavaScript1.2"> /* Glowing Text Script- © Dynamic Drive (www.dynamicdrive.com) For full source code, installation instructions, 100's more DHTML scripts, and Terms Of Use, visit dynamicdrive.com */ function glowit(which){ if (document.all.glowtext[which].filters[0].strength==3) document.all.glowtext[which].filters[0].strength=2 else document.all.glowtext[which].filters[0].strength=3 } function glowit2(which){ if (document.all.glowtext.filters[0].strength==3) document.all.glowtext.filters[0].strength=2 else document.all.glowtext.filters[0].strength=3 } function startglowing(){ if (document.all.glowtext&&glowtext.length){ for (i=0;i<glowtext.length;i++) eval('setInterval("glowit('+i+')",150)') } else if (glowtext) setInterval("glowit2(0)",150) } if (document.all) window.onload=startglowing </script>

If you wish to change the color of the glow (from yellow to something else), just change FFFF00 inside the <style> tag.

Step 2: Now, to fire up some text, wrap it with the below span tag:

<span id="glowtext">This is a glowing text</span>