free hosting   image hosting   hosting reseller   online album   e-shop   famous people 
Free Website Templates
Free Installer

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:

Now place the code below into the body section:

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


© 2001 CyberSchool