Random Letter Spacing Menu - Tested in IE 7.0, Netscape 8.1.3, Opera 9.21, Firefox 2.0.0.4 and AOL Explorer 1.5

We have tested the code in IE 7.0, Firefox 2.0.0.4, Opera 9.21, Netscape 8.1.3 and AOL Explorer 1.5. This script worked well in all platforms with no variations observed.

Depending on your knowledge of HTML and javascripts, this is an easy two (2) part copy and paste code that goes in both the <HEAD> section (CSS and Javascript sections) and <BODY> section (wherever you want it to appear) of your document. The below two sections of code (located within the<HEAD> section) are where you will make your first reconfigurations. The CSS section is cosmetic for colors mouseover etc. The second part (javascript) is for the speed of the animation and the spacing between letters. See below where and howto reconfigure these sections.

<SCRIPT LANGUAGE="JavaScript">
/**********************************************************
Script made by Martial Boissonneault © 2001 http://getElementById.com/
This script may be used and changed freely as long as this msg is intact
Visit http://getElementById.com/ for more free scripts and tutorials.
***********************************************************/
nSpace=5 // how many space maximum between each letter
nSpeed=100 // the speed of the animation
timerLSM=null;

Here is where you will configure the mouseover and color effects. This is the CSS section. Just experiment with this until it fits your site.

Here is where you will make your reconfigurations for the spacing and speed of the links.

For your Information: On these reconfigurations the higher the number for the nSpeed setting will be the slower the links animate. We have ours set at 400.
For the nSpace we have ours set at 3. The higher this number the more spaces between letters on animation.

The last part of this script is pasted into the <BODY> section of your document wherever you want this effect to appear. This is where you reconfigure your links, targets and the path they will follow. Since this section is slightly more configurable, we will first show you the "default" and then the reconfigurations.

<div id="menucont">

<a href="#" id="a1" class="menulinks" title="what's new">what's new</a><br>
<a href="#" id="a2" class="menulinks" title="about this site">about this site</a><br>
<a href="#" id="a3" class="menulinks" title="dhtml scripts">dhtml scripts</a><br>

<div id="menucont">

<a href="Link URL Here"target="_blank" id="a1" class="menulinks" title="Alt Tag Link Description">Link Name</a><br>
<a href="Link URL Here" id="a2" class="menulinks" title="Alt Tag Link Description">Link Name</a><br>
<a href="mailto:Your Email Address" id="a3" class="menulinks" title="Send Us Email">Contact Us</a><br>

Now that we have shown you where you need to reconfigure this script, we will now give you a little description of what the different sections do so that when you reconfigure, it will make more sense with the configurations.

<a href="Link URL Here" This is where you add the "Complete" URL starting with the http://.
target="_blank" This is the attribute you would use if you want the link to open in a new browser window. The default does not have this attribute so if you need it to open in a new window, add this attribute.
id="a1" This is the numerical listing in chronological order. You can add more links to this code but remember to keep the sequence in numerical order as in a1 a2 a3 a4 etc. and so on.
title="Alt Tag Link Description" This works the same way that an Alt tag works on mouseover with an image. When you touch the link with your cursor, the description will pop up.
">Contact Us</a> This one is very self evident. This is what you would call your link that is seen on the page itself.
<a href="mailto:Your Email Address" This is the same as a regular link but it is just slightly different so people can send you email. You will notice instead of the http:// you substitute mailto: and your email address.

This script removes the lines under the links until mouseover only within the script parameters itself. If you have other text links on your page, you will see the lines under the links unless you use one of the below scripts to eliminate the lines.

This below script will remove the line completely from all links Outside the parameters of the script, and is pasted before the closing <BODY> tag in your document.

<style>

</style>

This below snipplet of code is pasted in the <HEAD> section of your document. Just change the ?????? to a six digit HEX code. With hhis in place it will show no line under a link until mouseover and then a line underneath the link will appear in the color you designate.

<style>
a{text-decoration:none}
a:hover{text-decoration: underline; color:#??????;}
</style>

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]

Search Our Site By Individual letter

[ A ] [ B ] [ C ] [ D ] [ E ] [ F ] [ G ] [ H ] [ I ] [ J-K ] [ L ]
[ M ] [ N-O ] [ P-Q ] [ R ] [ S ] [ T ] [ U-V ] [ W ] [ X-Y-Z ]

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 ] [ Form Index ]
[ 2001 ] [ 2002 ] [ 2003 ] [ 2004 ] [ 2005 ] [ 2006 ] [ 2007 ]
[ Disclaimer ]

[ News Letter Archives ] [ Navigation Page ] [ Archives Of Published Material ]
[ Link To Us ] [ Alphabet Index ] [ Feedback ] [ On Line Support ] [ FAQ ]
[ Webmaster Utilities ] [ Casino ] [ Banner Exchange ] [ Advanced Site Search ]

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.