Link Fader Script

This script will "fade" a link (as the mouse cursor hovers over it) from its original colour to a different colour (as defined by "fadeTo"). This colour is customizable and can be any hex colour (eg ffff00 00ff00 348900 etc). The effect works in Opera5.x, Mozilla/Netscape6.x and IE5.x (haven't tested in IE4). Netscape 4 (and other incompatible browsers) will not see the effect, nor will they alert the user with pesky JavaScript error messages.

 

Example links to play around with -

 

Download

[NEW] Click here to download version 1 (select "save"). Also make sure to visit this page from time to time to get updated versions of the script. This version is 5.2k initially, and reducable to 3.9k (by removing the comments, NOT the header, you can't remove that!). For more information about new features of this version, scroll down to news...

Click here to download the old version (0.5) - (select "save"). This version is 3.2k in size. It is for people that do not need the features of the newest version (above) which is also a little larger in file size.

 

Installation / Notes

I recommend you use an external .js file - place <script type="text/javascript" src="fader.js"></script> anywhere in your HTML source and that's all (assuming you have already copied fader.js into that directory).

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

[NEW] The script works by giving 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...

[NEW] 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.

[NEW] 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!

 

Bugs?

Please e-mail fayez at impenetrable.org and let me know - include information about which browser you use and your OS, etc. Thanks!

 

News / Updates

(16.05.02) Major updates to the script have been made... The script will no longer overwrite onmouseover and onmouseout attributes for links with these already set... It will instead ignore these links and not change (or fade) them in any way - read the notes above for details on how to fade these links anyway. You can now specify links to ignore (not fade at all) as well, if you wish to do so (read notes above). The script can now be placed anywhere in the HTML source of a document and will work 100% Finally, the fcS variable has been removed in favour of auto- detecting the start colour of the link that is being faded. In short, the script is a lot more robust and customizable. The only thing I would like to improve is the fact that a fade out has to be "cut short" if it is "interrupted" by another link that needs to be faded in. Now THAT's complicated ;) If I get that working, that'll be version 2...

(05.05.02) None yet really, just working on a few more "features" for the script... Got any ideas? fayez at impenetrable.org - Lemme know.