08/27/05
If you don't see this and the above nifty moving rainbow effect, then your browser doesn't understand javascript.
T his script creates a rainbow of color in your text. Very appealing when used sparingly. The script does not write the string out, but rather takes it from an existing HTML element.This script should function in any browser that supports "document.getElementById" Therefore, users with javascript disabled will not be adverely affected. They just won't get the pretty colors.
W e have tested the code in IE6.0, Firefox1.0.6, Opera8.02 and Netscape7.02 and Netscape8.0.3.3. This script worked well in all platforms with no variations observed.
D epending on your knowledge of HTML and javascripts, this is an easy two part copy and paste code that goes in both the <HEAD> and <BODY> sections of your document with minimal reconfigurations within the <BODY> section(s) of code.
T o add this effect into numerous places on your page, just follow the sequence on the below section of code. The default has two elements as shown below. Pay particular attention to the "r1" numbers and the RainbowSpan2 numbers in the sequence. The third example is not part of the default and shall be numbered sequentially.,/font>
W e have marked each part of the <BODY> section of code with a Start and End to clarify each individual effect.
<!---------- Start One BODY section effect ---------->
<h3* id="r1">Text Goes Here</h3>*
</div>
<script type="text/javascript">
var r1=document.getElementById("r1"); //get span to apply rainbow
var myRainbowSpan=new RainbowSpan(r1, 0, 360, 255, 50, 18); //apply static rainbow effect
myRainbowSpan.timer=window.setInterval("myRainbowSpan.moveRainbow()", myRainbowSpan.speed);
</script>
<!---------- End One BODY section effect ---------->
*<h3 <h3 These tags which you will notice in the above section of code are just text size. You can remove them and replace them with a <p> </p> as in the below section. You can also just remove them altogether and replace them with whatever opening paragraph tag you want.
<!---------- Start One BODY section effect ---------->
<p id="r2">Text Goes Here</p>
</div>
<script type="text/javascript">
var r2=document.getElementById("r2"); //get span to apply rainbow
var myRainbowSpan2=new RainbowSpan(r2, 0, 360, 255, 50, 348); //apply static rainbow effect
myRainbowSpan2.timer=window.setInterval("myRainbowSpan2.moveRainbow()", myRainbowSpan2.speed);
</script>
<!---------- End One BODY section effect ---------->
Additional Effect
<!---------- Start One BODY section effect ---------->
<p id="r3">Text Goes Here</p>
</div>
<script type="text/javascript">
var r3=document.getElementById("r3"); //get span to apply rainbow
var myRainbowSpan3=new RainbowSpan(r3, 0, 360, 255, 50, 348); //apply static rainbow effect
myRainbowSpan3.timer=window.setInterval("myRainbowSpan3.moveRainbow()", myRainbowSpan3.speed);
</script>
<!---------- Start One BODY section effect ---------->
Note of Importance ~ Notice how the numbers have changed in the added effect. In other words, if you want to add another effect after the above one, (that has already been reconfigured for one more than the default number of 2 effects) you must replace the 3 with a number 4 in all the defined places.
T he next thing we shall cover is the changing of the colors within the rainbow effect. The below chart is part of the comments within the script itself. This is used as a gauge for you to better understand howto change the colors within the effect.
* Notes on hue
*
* This script uses hue rotation in the following manner:
* hue=0 is red (#FF0000)
* hue=60 is yellow (#FFFF00)
* hue=120 is green (#00FF00)
* hue=180 is cyan (#00FFFF)
* hue=240 is blue (#0000FF)
* hue=300 is magenta (#FF00FF)
* hue=360 is hue=0 (#FF0000)
S o in reality, what we are saying is that you need to experiment with the "Below Numbers" until you find the numbers that work for you.
<p id="r3">Text Goes Here</p>
</div>
<script type="text/javascript">
var r3=document.getElementById("r3"); //get span to apply rainbow
var myRainbowSpan3=new RainbowSpan(r3, 0, 360, 255, 50, 348); //apply static rainbow effect
myRainbowSpan3.timer=window.setInterval("myRainbowSpan3.moveRainbow()", myRainbowSpan3.speed);
</script>
T o answer a question that has been ask of us numerous times, the answer is "No", you do not insert the <HEAD> section of code more than one time, even though you are adding more than one of these effects into a single page. It is only inserted "Once".
As you can notice, you can insert this effect in as many places within your page as you want. Just remember that over use of this can be annoying to your visitors!
I
f you would like to add this effect into your pages, grab the below link and you are there. If you have any problems with this, feel free to contact us.
[
Get Code Here ]
[ Rate This Page ]
S
elect the below link and your default email will appear for you to fill out and send this page to your friends.
|
Search Our Site By Individual letter
[ A ]
[ B ]
[ C ]
[ D ]
[ E ]
[ F ]
[ G ]
[ H ]
[ I ]
[ J-K ]
[ L ] |
|
Little Tips Directory [ Page 1 ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5 ] [ Page 6 ] [ Page 7 ] |
|
[ Index Page 1 ]
[ Index Page 2 ]
[ Index Page 3 ]
[ Index Page 4 ]
[ Index Page 5 ] [ Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ] [ Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ] [ News Letter Archives ]
[ Navigation Page ]
[ Archives Of Published Material ] |
If you are part of the ever growing number of webmasters who enjoy
sharing your knowledge with others on web design, join The
Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today
This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.
Copyright © Consigliere Ltd., All Rights Reserved. 2001-