raingod >> angus >> computing >> html >> stylesheets

Link Marker Magic

Last updated: 08.05.2002

Suppose you have a set of pages that you want people to read, and you want to give them a visible indication of whether they've already read them or not. Most people's browsers will change the color of links that they've visited, but that's a little dull. A more interesting approach might be to put some kind of mark next to the link to show which pages the user has already visited. With stylesheet-capable browsers, this is easy enough to do, and no programming is required. Here are a couple of examples.

Demonstration 1

Please visit the following links:

* Writing

* JavaScript

* Spam

Demonstration 2

Please visit the following links:

Gallery

Other Worlds

Poetry

Use your browser's Back button to return to this page after visiting each link. Note that the right-hand example may not work in all browsers.

The trick, of course, is that the marks are there all along: they just aren't visible until the page has been visited. This can be achieved using the 'link' and 'visited' pseudo-classes in stylesheets. The stylesheet for this page looks like:

The 'link' and 'visited' stylesheet pseudo-classes allow a link to be given a different appearance dependent on whether it's already been visited or not (rather like specifying the 'LINK' and 'VLINK' colors in a <BODY> element, but more flexible). To make these demonstrations work, the markers are themselves links, and link to the same place as the 'normal' links that appear to their right. Their appearance can then be determined by a pseudo-class specification in the stylesheet, according to whether the place they link to has been visited or not.

The left-hand demonstration uses a class called 'fadeaway', which is applied to the marker object (in this case a simple asterisk character): if a link of this class has not been visited, its color is white, which is also the color of the background of this page, making the marker invisible. If the link has been visited, then its color changes to black, and it becomes visible.

The right-hand demonstration uses a property of CSS-2 which is not yet implemented by all browsers. CSS-2 allows you to specify whether an object can be seen or not with the 'visibility' property. The demonstration uses a class called 'hideaway', in which unvisited links are invisible, and visited links are visible. The marker in this case is actually a small graphic. If the link hasn't been visited, this graphic will be invisible: as soon as the link has been visited, the checkmark appears next to it.

The technique can also be used in reverse, by simply swapping the definitions for 'link' and 'visited'. In this case, the mark next to the link disappears as soon as the user has visited the page, You could even make the link itself disappear once the user has seen the page (although this is potentially confusing and thus a bad idea).

Use your browser's "View Source" feature to see exactly how this was implemented. To view the demonstration again, go to your browser's preferences panel and click the Clear History button under the Advanced settings (Internet Explorer), or the Expire Now button under the Navigator settings (Netscape Navigator).