FAQTs - Knowledge Base - View Entry - How can I apply a glow filter to my links (IE5+)?

Faqts : Computers : Programming : Languages : JavaScript : Links

+ Search

Entry

How can I apply a glow filter to my links (IE5+)?

Mar 24th, 2001 08:22
Martin Honnen,

Here is the code:
<html>
<head>
<style>
A {
  width: 10px; /* need to set a width so that a filter is applied */
}
</style>
<script>
var glowColor = 'red';
var maxStrength = 3;
var delay = 10;
var isIE5 = document.all && document.getElementById && !window.opera ? 
true : false;
var curLink, tid, strength, color;
function startGlow (link, color) {
  if (isIE5) {
    if (tid)
      clearInterval(tid);
    if (curLink && curLink.style && curLink.style.filter)
      curLink.style.filter = '';
    curLink = link;
    window.color = color || glowColor;
    strength = 1;
    tid = setInterval('glowLink()', 10);
  }
}
function stopGlow () {
  if (isIE5) {
    if (tid)
      clearInterval(tid);
    if (curLink && curLink.style && curLink.style.filter)
      curLink.style.filter = '';
    curLink = null;
  }
}
function glowLink () {
  if (curLink.style)
    curLink.style.filter = 'glow(color=' + color + ',strength=' + 
strength + ')';
  strength++;
  if (strength > maxStrength)
    clearInterval(tid);
}
</script>
</head>
<body>
<a href="http://www.kibo.com"
   onmouseover="startGlow(this);"
   onmouseout="stopGlow();"
>
<nobr>
Visit GOD
</nobr>
</a>
<br>
<a href="http://JavaScript.FAQTs.com"
   onmouseover="startGlow(this, 'orange')"
   onmouseout="stopGlow();"
>
<nobr>
JavaScript.FAQTs.com
</nobr>
</a>
</body>
</html>