CodeBrain.com
javascript / dhtml
Return to Index
Making Your Links Light Up
About This Demo...

We've had dozens of people write in about the 'Light-Up Links' we use.  Not only are these a cool effect -- and a super-simple substitute for roll-over images -- but they also really do help people to navigate your site more easily.  These Cascading Style Sheet (CSS) effects work best as shown here in MS Internet Explorer (4&up) -- but they do work partially in Netscape 4 (i.e., you can have links of different colors that change when clicked, but not on a mouseOver) and they do degrade gracefully to normal links in older browsers.

Slide your mouse over the links below, and note that you can have different active and inactive colors on different links -- an extremely useful device to aid in navigation if different types or groups of links need to be color-keyed differently.

Yellow to Cyan
Yellow to Cyan
Yellow to Cyan
Red to Magenta
Red to Magenta
Red to Magenta
Orange to Green
Orange to Green
Orange to Green

All you do to get this to fly is add the CSS  <style> ... </style> script (shown below) into your page header, and then add class="stylename" to your <a href> tags as explained in the instructions.  Be sure to experiment with the color combinations (all in standard 0-255 RGB format) -- there's a great deal more you can do with this technique!

The Code & Instructions...

Click HERE to Select the Code.  (Pressing Ctrl+C will then place it in your Clipboard.)

 

Return to Index
CodeBrain.com
Copyright 1996-2004 by CodeBrain.com
All Rights Reserved