	free hosting image hosting hosting reseller online album e-shop famous people

Glowing Link

This script lets you create a link that glows on mouseover.

Paste this code in the head section of your page:

<style> a {color:black; width:150; font:bold;} </style> <script type="text/javascript"> var i function glow() { i=0 interval=setInterval("makeglow(myLink)",10) } function back() { clearInterval(interval) myLink.style.filter=false } function makeglow() { i++ if (i<5) { myLink.style.filter="glow(color=#FF00FF,strength=" + i + ")" } else if (window.interval) { clearInterval(interval) } } </script>

This section goes in the body:

<a href="yourpage.html" id="myLink" onmouseover="glow()" onmouseout="back('linkid')"> Mouse over this link</a>

How It Works

In the bottom section - the body code - the link is given the ID myLink.

In the top script, a few parameters for the link are preset in the STYLE tag.

The width parameter must be preserved in order for the filter to work.

Adjust the value to accommodate longer link text.

When the mouse passes over the link, the function glow() is called.

This uses a loop from 0 to 5 control a setInterval timer, with steps of 10 milliseconds.

In turn, this timer controls the function makeglow().

This applies a purple glow filter (FF00FF) to the link with the ID myLink:

myLink.style.filter="glow(color=#FF00FF,strength=" + i + ")"

The intensity of the filter depends on the value of the counter i.

Both colour and timer values may be modified as required.

When the timer reaches its final count, the interval is cleared.

The last glow intensity value is retained until the mouse leaves the link.

On mouseout, the function back() is called, which:

clears the interval timer - clearInterval(interval)

disables the glow filter - myLink.style.filter=false

Try It Out

Clicking the link merely refreshes this page

Place your mouse over this link