CodeLifter.com - JavaScript Light 'Em Up Links Script

Functions:  One of the most-asked questions in our support
            mail, this very simple technique shows how to
            add differently colored links to the same page
            that light up and underline on mouseOver.
            
Browsers:   IE4-6, NS6
            (NS4 - partial, sets fixed color only)
            (Degrades gracefully in other browsers)

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

Step 1.
Installation

Put the following style script in the head of your page.  See
notes on modifications and use below.

<style>
<!--

A.type1:link    {color:#FFDD00; text-decoration:none;}
A.type1:visited {color:#FFDD00; text-decoration:none;}
A.type1:active  {color:#FFDD00; text-decoration:none;}
A.type1:hover   {color:#00FF80; text-decoration:underline;}

A.type2:link    {color:#FF0000; text-decoration:underline;}
A.type2:visited {color:#FF0000; text-decoration:underline;}
A.type2:active  {color:#FF0000; text-decoration:underline;}
A.type2:hover   {color:#ABCDEF; text-decoration:underline;}

A.type3:link    {color:#00CCFF; text-decoration:none;}
A.type3:visited {color:#00CCFF; text-decoration:none;}
A.type3:active  {color:#00CCFF; text-decoration:none;}
A.type3:hover   {color:#FF8000; text-decoration:overline underline;}

//-->
</style>

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

Step 2.
Attaching the individual styles to individual text links

This couldn't be simpler...

For a text link, just include a class="styleName" in the
<a href> tag, like this...

<a class="type1" href="http://whatever.com">click</a>
<a class="type2" href="http://whatever.com">click</a>
<a class="type3" href="http://whatever.com">click</a>

where type1, type2, and type3 are the style names in the
<style> script above.

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

Notes on Modifications and Use

We've named the individual styles type1, type2 and type3
arbitrarily.  You can use any name (no spaces, mixed upper-
and lowercase are acceptable).

There is no real limit on the number of individual link
styles you can use on a page.  To add more, just follow the
general pattern.

To change the colors, just do the obvious -- the colors are
set in #RRGGBB exactly the same as in HTML.

The text-decoration sets how the underline will (or will
not) appear with a link.

text-decoration: none;  will not show a link underline
text-decoration: underline;  will show a link underline

One additional cool trick with this is to use:

text-decoration: overline underline;

which will show a line both over and under a link.

CAUTION!

One common error in use in applying these is to have tags
intervening between the <a href> and the text that is
linked. For example, this IS right...

<font size="2">
<a class="type3" href="http://whatever.com">
click
</a>
</font>

This is NOT right and may fail...

<a class="type3" href="http://whatever.com">
<font size="2">
click
</font>
</a>

Make sure the <a href>...</a> tags directly surround the
text to which you are applying the style!

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

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.