Text Cross-Fader Script

Use this script to easily create crossfade color effects. Just put any text you want in "SPAN", "DIV", or "P" HTML tags, add a snippet of code, and the script does the rest. This effect only works in newer "standards" browsers such as IE5.5+, Netscape6+, and Mozilla. It will NOT work in IE4 or Netscape 4.x, but will not generate errors. Those older browsers will simply display the text normally.

Unfortunately, you can only use "pure" text (no HTML code). Here's what the script does to create this effect:

The script actually "pulls" all the text out of the element whose ID you specified.
Next, it separates each character from each other.
Then it wraps each of those characters in its own <SPAN> tag.
It then calculates what each character's color will be based on the starting and ending colors you specified and applies the color to the appropriate character.
Finally, it "puts" all those separate <SPAN> tags back into the orginal element. Voila!

Therefore, if you try to apply the effect to the following code:	<span id="img1" style="font-weight:bold"><img src="button.gif"> Example Button</span>
You would get this:	Example Button
When you really probably wanted this:	Example Button

For those of you who want to know why it does this: When the script separates all the characters, it splits up the parts of the HTML tags that would normally be rendered. Since the HTML tag is split up, the browser renders each character as if it were by itself, which they really are since each is separartely wrapped in its own SPAN tag.

Installation:

Copy and paste the following line of code into the <HEAD> section of your page:

<script language="javascript" src="textcrossfader.js"></script>
Wrap any text (remember: no code, just text) in any block-level element such as <DIV>, <SPAN>, or <P>. A "block-level" element is one that has a beginning and an ending tag.
Assign the element a unique ID value.
"Activate" the effect by adding a line of Javascript inside some javascript tags. This should be at the bottom of your page just before the </BODY> tag.

<script language="javascript">
crossFadeText('ID','startColor','endColor');
</script>

The values are as follows:

1: 'ID' The unique ID string value you assigned to the element.

2: 'startColor' The starting color string in HEX form. Eg: #FFFFFF

3: 'endColor' The ending color string in HEX form.
If you have multiple elements that you want to apply this effect to, you can add all the javascript commands at once like this:

<script language="javascript">
crossFadeText('id1','#FF00FF','#00FF00');
crossFadeText('id2','#A4D500','#2d3e4f');
crossFadeText('id3','#B4A322','#FFFFFF');
</script>

1:	'ID'	The unique ID string value you assigned to the element.
2:	'startColor'	The starting color string in HEX form. Eg: #FFFFFF
3:	'endColor'	The ending color string in HEX form.