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

Link With Drop Shadow

This script places a drop shadow over a link when the mouse passes over it.

Paste the code below in the head section of your page:

<style> a { color:black; height:25; font:bold; text-decoration:none; } </style> <script type="text/javascript"> var i function dropshadow() { i=0 interval=setInterval("makedropshadow(myLink)",10) } function back() { clearInterval(interval) myLink.style.filter=false } function makedropshadow() { i++ if (i<7) { myLink.style.filter="dropshadow(offx=" + i + ")" myLink.style.filter="dropshadow(offy=" + i + ")" } else if (window.interval) { clearInterval(interval) } } </script>

Now place the code below into the body section:

<a href="somepage.html" id="myLink" onmouseover="dropshadow()" onmouseout="back()">Mouse over this link</a>

How It Works

The basic parameters for the link are set up in the style section.

In the body section, the link is given an ID, myLink.

When the mouse moves over the link, the function dropshadow is called.

A setInterval timer is used to set the transition period of the drop shadow - in this example, 10 milliseconds.

The function makedropshadow does most of the work.

A CSS dropshadow filter is a pplied to the link whose ID is myLink.

The counter progressively places the shadow x and y pixels from the link:

myLink.style.filter="dropshadow(offx=" + i + ")"
myLink.style.filter="dropshadow(offy=" + i + ")"

As the counter increments, the shadow becomes more pronounced.

When the counter reaches its end point, the interval is cleared.

It is also cleared - and the filter is removed - when the mouse moves off the link.

This is performed by the function back:

function back()
{
clearInterval(interval)
myLink.style.filter=false
}

Try It Out

Place your mouse over this link