Colour Coding Links

On the page Setting Link Colours, I introduced the basics of setting your link colours. Using the various methods described there you can set the colours that your links will use before you click on them, when you hover the mouse over them, when you click on them, and after you click on them. This allows you to use different colours to let your visitors know which links they have visited and which they haven't.

There are other reasons why you might want to give different links on your page different colours other than just distinguishing between visited and unvisited links.

We can solve all of these issues by colour coding the links on our page. We do this using stylesheets and class definitions.

On this site I use four different colours for the links depending on what the links are for and use slightly different shades of those colours to distinguish between unvisited and visited links. What I will do now is to show you how each of these is coded and used. From these examples you should be able to figure out for yourself how to apply different link colours for different purposes on your own site.

Let's start with the standard links that are included in the main text of the page and which either take you to another page on this site or which give you the opportunity to download files from this site. For these links I use a slightly lighter blue than the default and a shade lighter again for the visited links. When the mouse is moved over a link the background colour changes to yellow to make the link stand out more. I have also made the links bold to help them to stand out more from the surrounding text as I have also removed the underline to reduce clutter on the page. The code in my stylesheet that gives these colours to my standard links is as follows:

 a:link{text-decoration:none;color:#6666cc;font-weight:bold;}
a:visited{text-decoration:none;color:#6699ff;font-weight:bold;}
a:active{text-decoration:none;color:#6666cc;font-weight:bold;background-color:#cccc00;}
a:hover{text-decoration:none;color:#0000cc;font-weight:bold;background-color:#cccc00;}

There is no special code required to apply these attributes to links on my pages as anyone using a browser that supports stylesheets will see these colours by default (unless they override my stylesheet with their own).

Next let's consider the links in the dark blue navigation bar. Everything in this area is a link so we don't need to make the text bold to show it up as a link. Blue on blue doesn't show up very well so let's make the links white with a light grey for visited links. As the background will turn yellow when visitors hover their mouse over the link, we'll make the text turn black when they do that. Stylesheets inherit attributes from earlier definitions where they are not redefined so we don't need to define everything again where it hasn't changed. Adding the following lines after those above in my stylesheet defines a nav class that I can use for links in the navigation bar:

 a.nav:link,a.nav:active{color:#ffffff;font-weight:normal;}
a.nav:visited{color:#cccccc;font-weight:normal;}
a.nav:hover{color:#000000;font-weight:normal;}

So now we've defined a nav class to use with links, how do we use it to apply those attributes to the links within the navigation bar? What we need to do is to work out which links on the page will appear in the navigation bar and add class="nav" to the <a> tag for each link within that area. For example:

<a class="nav" href="site.htm">site map</a>

All of the above links are to locations within my site. I want to let visitors know if a link will take them to a page on another site. There are two reasons that I have for wanting to make this distinction. Firstly, I prefer to open external links in a separate browser window so that the visitor does not leave my site when they click on an external link, my site is still there in the background to go back to when they close the new browser window. Secondly, I have no control over the content of the other sites and also I will not necessarily know if the site I am linking to is currently available. The other site may even have been deleted.

For these reasons, I have chosen to display all of the external links in magenta instead of blue. The stylesheet code that I use to define the ext class that I will use with my external links is:

 a.ext:link,a.ext:active{color:#9966cc;}
a.ext:visited{color:#cc99ff;}
a.ext:hover{color:#9900cc;}

All of the external links on the site have the link start with <a href="http:// but unfortunately there is no way to automatically apply a different style to all external links so the class parameter needs to be added separately to all of the external links on the site. Knowing that all of the external links have absolute rather than relative addresses just makes finding the links easier. Once each link is found the appropriate class parameter can be added along with the target parameter that will get the site to open in a new window. For example:

 <a class="ext"  href="http://www.amra.asn.au/">Australian Model Railway Association</a>

Finally, let's consider a use for links where the links will not actually go anywhere. Why would you want a link that doesn't go anywhere? Well you don't necessarily have to link to a new page to provide additional information, one example of this is to use Javascript Tooltips to create hypertext that will appear whenever your visitor moves their mouse over the link. The link just provides the active area for the mouse hover and doesn't actually attach to another page. To indicate that links won't actually do anything when they are clicked, I have made them grey by placing the following at the end of my stylesheet definitions to define an nl class to use with these links.

 a.nl:link, a.nl:visited, a.nl:active, a.nl:hover {color:#999999;}

Again, there is nothing that will allow us to apply this colour scheme to links without coding the class into each link individually. With these links we know that we will always have onmouseover and onmouseout parameters in the link statement since these are what will perform the actual functionality when the visitor moves their mouse over the link. As we don't want the link to actually do anything when clicked we add onclick="return false" which is the Javascript code to do nothing when the link is clicked. To allow for users who have Javascript turned off or who are using browsers that don't support Javascript we will attach the link to the top of the current page using href="#". For example:

 <a class="nl" href="#" onclick="return false" onmouseout="popUp(event,'t1')" onmouseover="popUp(event,'t1')">this link</a>

Hopefully the above examples will help you to work out the code that you need to use to colour code the links on your site. When you colour coding your links you may want to specify somewhere on your home page about the special meanings that you have assigned to the different colour links on your site but if all of the links stand out from the surrounding text this shouldn't be necessary. Visitors either don't care what the colour coding means or they will be able to figure it out for themselves or they will send you an email complaining that they can't figure out the links on your site. If you start getting emails about how confusing your links are then you will know that you have overdone the colour coding.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate