• Page 1 of 1
  • 1
Archive - read only
uCause Community » Trash & Archives » Trash » JavaScript Light 'Em Up - Links Multiple color on links
JavaScript Light 'Em Up - Links Multiple color on links
SirDarknight(Tonmoy)Date: Saturday, 2011-11-05, 5:35 AM | Message # 1
Member
Group: Senior Members
Messages: 894
Awards: 10
Reputation: 15
Status: :-(
============================================================
Script: Multiple-Color Interactive Light-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: FF1+, IE4-6, NS6+
(NS4 - partial, sets fixed color only)
(Degrades gracefully in other browsers)

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

Installation


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

Code
<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>

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

Attaching the individual styles to individual text links


This couldn't be simpler...

For a text link, just include a class="styleName" in the

tag, like this...

Code
<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
uCause Community » Trash & Archives » Trash » JavaScript Light 'Em Up - Links Multiple color on links
  • Page 1 of 1
  • 1
Search:


"Making uCoz web designs simple and easy to use"
- uCause Developers