LinkFader Script

Fading Links

Example Link 1

Example Link 2

Example Link 3

Example Link 4

Example Link 5

Normal Link (no effects)

This script will gradually fade the text for any link you choose from one color to another. Just set a number of parameters in the link HTML tag and the script will do the rest. Simply omit the parameters for links which you want to keep the default look.

This effect only works in IE5+, Netscape6+, and Mozilla 1+, but does not cause errors in older browsers.

Installation:

The parameters that you have to set in the <A> HTML tag are just a set four values seperated by a "~" sign. Spaces between the values and the "~" sign are ok if it helps readability, but they aren't needed.

Example tag:

<a href="#0" parameters="#FF0000 ~ #0000FF ~ 300 ~ 300">Example Link 1</a>

Below is the breakdown of the "parameters" attribute:

The first value is the starting color expressed in HEX form.
The second value is the ending color expressed in HEX form.
The third value is the time (in milliseconds) it takes to change from the start color to the end color when hovering over a link.
The fourth value is the time (in milliseconds) it takes to change from the start color to the end color when hovering out of a link.

Now, just paste the following code at the bottom of your HTML page just before the </BODY> tag:

<script language="javascript" src="linkfader.js"></script>

Once you create your tags and parameters correctly, the script will automatically search for <A> tags with your parameters in them.

Notes & Advanced Options:

The script also supports this effect for other elements along with/instead of just an <A> tag. This is done by adding the parameters attribute to the inside of the element and then instructing the script to look for those elements too.

Example using a <SPAN> tag:
1. Create the element and add the parameters like so:
  
  <span parameters="#000000 ~ #FFFFFF ~ 300 ~ 300" style="border:1px solid black; padding:3px; cursor:default">SPAN TAG</span>
2. At the very bottom of your HTML page, (under the the script tag that loads the "linkfader.js" file, but before the </BODY> tag) insert a command between script tags to have the linkfader script search for the other elements like so:
  
  <script language="javascript">
  fadeW3CElements('SPAN');
  </script>
Now the script will also search for <SPAN> elements that have the "parameters" attribute set. See the working product below. Other style attributes were added to make the example clearer, but is not necessary

SPAN TAG

Note: you don't have to add the extra script to search for the <A> tag because the script does this automatically. These extra steps are just needed for other element types. Incidentally, many elements can be used this way: table cells, DIV tags, etc.
Some people somewhat familiar with javascript may notice that the script functions on the onmouseover, and onmouseout events. Hmmm, it looks like you can't set handlers for these events now, right? Wrong! :) You can still set these handlers in the tag and everything will still work fine

Below is some example code which changes the statusbar text using mouse events to demonstrate:

<a parameters="#0000FF ~ #FFB503 ~ 600 ~ 600" onmouseover="window.status='MOUSEOVER'" onmouseout="window.status='MOUSEOUT'">Example Link 3</a>

...and the end result (watch the status area): Example Link 3