Link colour changes, using the style 'Hover' option.

Link colour changes using the 'hover' style option

CSS Tip	One of a collection of free javascripts from www.technorealm.co.uk

(Hover options work in IE4/5/6 & NS6, they shows as normal links in Netscape 4.x).

We know it's not a javascript, but it's a nice way to personalise you page links. So we've included it here.

You can change the colours, font, size and spacing of the links to suit your page style. The are a large number of other attributes that can also be changed, visit http://www.w3.org/ and download the latest Cascading Stylesheet Specification to see. You can cut and paste the scripts from below to modify yourself. Try to use only one style on your site for consistency. If you use more than one you will need to give them names and add a class="name" inside the links anchor tag. See examples below

Copy them into the <head> section of your page, then add links as normal.
The examples below may look a little extreme on the page, but they're there just to show you what you can do if you want!

Example 1

**********
<style>
A{font-family:Verdana,Arial;font-size:10,text-decoration: none;}
A:link{color:#330099}A:visited{color:#AAAABB}A:hover{color:#ff0000}
A:active{color: #CCCCFF}
</style>

Example 2

**********
<style>
A{font-family:'Bank Gothic Light BT',Verdana,Arial;font-size:14}
A:link{color:#000000;font-weight:bold;text-align:center}
A:visited{color: #c0c0c0}
A:hover{font-size:16; color:#0000FF;font-weight:bold}
A:active{color: #00cc00}
</style>

Example 3

**********
<style>
A{font-family:Arial;font-size:14}
A:link{color:#0000bb;font-weight:600;text-align:center}
A:visited{color: #00ddff}
A:hover{font-family:Verdana;font-size:16;color:#0FF000;font-weight:800;
word-spacing:3em;letter-spacing:1em;text-transform:uppercase}
A:active{color: #00cc00}
</style>

Example 4

**********
<style>
A{font-family:Georgia,Verdana;font-size:14}
A:link{color:#00dd00;font-weight:700;text-align:center}
A:visited {font-family:Verdana;color:#00aa00;font-style:oblique}
A:hover{font-family:Arial;font-size:16;color:#000000;font-weight:800;
vertical-align:super;line-height:120%}
A:active{font-family:Garamond,Georgia,Verdana;color:#00ffcc}
</style>

Example 5 and Example .sml

***********

<style>
A{font-family:Verdana,Arial;font-size:10,text-decoration: none;}
A:link{color:#330099}A:visited{color:#AAAABB}A:hover{color:#ff0000}
A:active{color: #CCCCFF}

A.sml{font-family:Verdana,Arial;font-size:10,text-decoration: none;}
A.sml:link{color:#556655}A.sml:visited{color:#667766}
A.sml:hover{color:#9a9a9a}A.sml:active{color: #FFFFBD}
</style>

In the last example, the top 2 lines would be used for normal links.
For links to use the bottom style you would use <A HREF="linked page.html" class="sml">Link text </A>

.sml can be any name you want as long as you use dot(name) e.g. .big, .blue, .daft etc, and you can have as many as you like on the page as long as a 'class' is defined. The dot is important, else it won't work.

www.technorealm.co.uk UK Web site design and graphics. A free resources site!

Link colour changes using the 'hover' style option

CSS Tip