RAINBOW TEXT EFFECT
This script has been tested on and shown to work with Internet Explorer 5+, Netscape 6+, Firefox 1.0 and Opera 7+
29-Sep-2005
: Added the option for the text to be a link and removed support for Internet Explorer 4.
STEP 1:
Copy and paste the code below so that it sits between the <head> and </head> tags at the top of your web-page:
<script type="text/javascript"> // <![CDATA[ var speed=100; // speed colours change, 1 second = 1000 var raincol=new Array("#ff0000", "#ff9900", "#ffff00", "#99ff00", "#00ff00", "#00ff99", "#00ffff", "#0099ff", "#0000ff", "#9900ff", "#ff00ff", "#ff0099"); // change the colours if you want to var alink="http://www.mf2fm.com/rv"; // page to link text to (set to ="" for no link) /**************************** * Rainbow Text Effect * *(c) 2003-6 mf2fm web-design* * http://www.mf2fm.com/rv * * DON'T EDIT BELOW THIS BOX * ****************************/ var rainbow, raintxt, raincnt=0; window.onload=function() { if (document.getElementById) { var i, raini; rainbow=document.getElementById("rainbow"); raintxt=rainbow.firstChild.nodeValue; while (rainbow.childNodes.length) rainbow.removeChild(rainbow.childNodes[0]); for (i=0; i<raintxt.length; i++) { raini=document.createElement("span"); raini.setAttribute("id", "rain"+i); raini.appendChild(document.createTextNode(raintxt.charAt(i))); if (alink) { raini.style.cursor="pointer"; raini.onclick=function() { top.location.href=alink; } } rainbow.appendChild(raini); } rainbow=setInterval ("raining()", speed); }} function raining() { for (var i=0; i<raintxt.length; i++) document.getElementById("rain"+i).style.color=raincol[(i+raincnt)%raincol.length]; raincnt++; } // ]]> </script>
CLICK HERE
to select the above script ready to paste it into your clipboard
STEP 2:
Place a <span> element with 'id="rainbow"' on your web-page containing the text you wish to be turned into a rainbow. For example:
Don't
include anything other than text between the <span> tags.
THAT'S IT
When your page loads, the text you placed between between the <span> tags should be turned into a rainbow of colours, like the text at the top of this page.
No menu on the left?
Click here
for a full list of all the free DHTML and Javascript effects you could be using on your web-site!
If you like my Text and Graphic Effects,
please rate them @
ScriptSearch.com
!
- Select -
Excellent!
Very Good
Good
Fair
Poor
[ This page viewed 142 times. Last viewed Thu 11 Mar, 2010 at 08:37 ]