CodeLifter.com - JavaScript Easy Instant Interactive Menu Links Script

Functions:  Creates links with over- and under-lines that
            move from side to side on mouseOver; features:
               - hot color settable
               - cold color settable
               - degree of motion settable
               - well-behaved inside of layouts

Browsers:   IE4-6, NS6
            Degrades gracefully in older browsers

Author:     etLux
============================================================

Step 1.

Put the following script in the head of your page.  Set the
variables for link hot and cold colors and the motion.

// Set the coldColor for the link normal color
// Set the hotColor for the link mouseOver color
// Set the motionPix for how many pixels to move

var coldColor = "#FF0000"
var hotColor  = "#00FF00"
var motionPix = "7"

// do not edit below this line
// ======================================

============================================================

Step 2.

To attach the interactive motion to any link, all you need
to do is insert a class="InstantLink" into the <a href>.
For example:

<a class="InstantLink" href="http://address.com">click</a>

Other than that, just build your horizontal or vertical
menu or link list as you normally would.  (You can also
use this for in-line links, too, of course.)

Many scripts of this kind 'blow the layout'.  However, in 
this script, because the padding is switched back and forth
from the beginning to the end of the text string when the
mouse moves on and off the link, your overall layout should
remain static and well behaved.  Be certain, however, to
leave adequate width!  If you make a table containing a 
list of links, for instance, that is too narrow for the
width of the strings, you may see irregular results.

============================================================

Sample Code...

Here's the actual code from our page (above) showing this
technique used inside a couple of nested tables along with
some image spacers to dress out the layout.

<table border="0" cellpadding="1" cellspacing="0" bgcolor="#6E6650">
<tr>
<td>
<table border="0" cellpadding="7" cellspacing="0" bgcolor="#141414">
<tr>
<td bgcolor="#141414">
<font face="Arial" size="2" color="#FEDCBA">
<a class="InstantLink" href="http://www.codebrain.com">Thing One</a><br>
<img src="spacer.gif" width="5" height="5"><br>
<a class="InstantLink" href="http://www.codebrain.com">Thing Two</a><br>
<img src="spacer.gif" width="5" height="5"><br>
<a class="InstantLink" href="http://www.codebrain.com">Thing Three</a><br>
<img src="spacer.gif" width="5" height="5"><br>
<a class="InstantLink" href="http://www.codebrain.com">Thing Four</a><br>
<img src="spacer.gif" width="5" height="5"><br>
<a class="InstantLink" href="http://www.codebrain.com">Thing Five</a><br>
<img src="spacer.gif" width="5" height="5"><br>
<a class="InstantLink" href="http://www.codebrain.com">Thing Six</a><br>
</font>
</td>
</tr>
</table>      
</td>
</tr>
</table>

============================================================

Get The Code!

CodeLifter is a CodeBrain.com Sister Site
� 1995-2008 OEC Corp & CodeLifter.com
CodeLifter� & CodeBrain�
Legal Notices

CodeBrain InterNET Group
BrainCode.com	CodeFoot.com	CodeBelly.com
D3Q.com	etLux.com	FFFast.com
IEFix.com	PopUpWorks.com	MicroTicker.com
DavidSosnowski.com	OECCorp.com	MailToProtector.com
	CodeBrain.com

Free MP3
Downloads

Contemporary classical music, completely free.