Home / Free JavaScripts / Links / Here

Description: This script will "fade" links on your page from their original colour to a different colour  as the mouse moves over them . This colour is customizable and can be any hex colour. The effect works in Opera5.x, Mozilla/Netscape6.x and IE. Netscape 4 (and other incompatible browsers) will not see the effect, nor will they alert the user with pesky JavaScript error messages.

Example: Move your mouse over any link on this page.

- Dynamic Drive
- Freewarejava
- News.com
- MSNBC

Directions

Step 1: Simply place the following code into the HEAD section of your page:

Step 2: Now, download the following .js file which the script accesses, and upload to your webpage directory:

fader.js (download by right clicking, and selecting "Save as").

That's it! Now all links on your page will fade to the color specified inside the .js file.

Installation notes

Make sure not to use the CSS declaration a:hover (colour attribute) on your page, otherwise your links will "flicker". However, you may use any other attribute...

The script works by automatically assigning each link a unique "ID" attribute, so this will overwrite any current "ID" attribute set for that link, unless you specify to ignore that particular link, so make sure to do that...

You can now specify individual links to ignore (not fade at all). This can be done two ways... One is to add onmoueover="clearFade()" to your link. Another way is to assign the link(s) to a class and specify the name of this class in the fader.js file as ignoreClass.

The script no longer overwrites onmouseover and onmouseout attributes (yay!)... It will instead ignore links with these specified. If you still need to fade these links then you must add add findLink(this.id) to your onmouseover and clearFade() to your onmouseout, like so - <a href="#" onmouseover="findLink(this.id); yourFunction()" onmouseout="clearFade(); yourSecondFunction()"> Make sure to put it BEFORE any "return" statements otherwise the fade will not execute!