Using images to show the status of a link

It can be done

[Hester]

I've used a background image to show the status of any link on a page. When the link has been visited, the icon automatically changes to a different one. Plus there is an icon shown when you hover over the link.

I'm not sure if this is new or not only I see an article on Zeldman.com today (after making my site live the day before!) which uses a single background image to create CSS rollovers:

[pixy.cz ]

After seeing that I guess my 'major new idea' has probably been done before. If so, well here's how to do it anyway, as I think it adds quite a bit to the accessibility of the page. You can see instantly in a much clearer way which links are still unvisited and which you've already been to.

I use 3 images representing small dots. One is yellow, one orange and one red. (I originally used a green colour for new links but it didn't match my layout.)

Next I declare the following link code in my stylesheet so the images are used as backgrounds for every link on the page. To avoid them overlapping the link text I add some padding.

:link, :visited {text-decoration:underline; color:#840; padding-left:14px;}
:link:focus, :visited:focus {color:#840;}
:link {color:#840; background:transparent url(../images/link-orange.gif) no-repeat bottom left;}
:visited {color:#b70; background:transparent url(../images/link-red.gif) no-repeat bottom left;}
:visited:hover {color:#840; background:transparent url(../images/link-yellow.gif) no-repeat bottom left;}
:link:hover {color:#b70; background:transparent url(../images/link-yellow.gif) no-repeat bottom left;}

To see the effect in action, I strongly recommend you take a look at my current layout via the link to my website in my Profile. It's fun running the cursor up and down the links in the menu list! Try visiting a link and coming back to see what happens.

This works great in the main browsers on Windows. However there are a few subtle differences to watch out for. I may be able to solve these with further testing:

In Mozilla 1.4, long links that spill over two lines get padding added on the second line as well. So there is an unwanted gap (which gets underlined, but the text is too far in).

In IE6, long links on 2 lines cause the background image to appear on the second line. Maybe if I positioned the image at the top instead?

For short links though I think it looks great. You can use different icons of course. You might put some text in them, or use a tick or a cross. Why not give it a go.

[drbrain]

I see you are a student of David Baron by the order of your selectors :)

[Hester]

You know I got that code from somewhere which defined it as the best way to style links across all browsers, but I can't recall where I saw it. Do you have a link?

I think the third line was for IE6. That browser doesn't appear to be able to show a separate visited-hover color and a unvisited-hover - it's either or. Whereas Mozilla shows both. Or maybe it's my unusual code?

[SuzyUK]

Hester...

I'm not sure but I think you missed the point of pixy's example.

the idea is to use one graphic only and just have it "change" on link/visited/active/hover by changing the background-position property only, so there is no "flicker" caused by the delay in downloading a new image.

I have already been doing this to "bring in" arrow/bullets to active lists and it really does work well

btw like the new design ;)

Suzy

[claus]

Great trick, i'm not a great fan of bells and whistles but i just might want to use that :) And the Mozilla "bug" is just the behavior i want, so i just need to get IE to do the same - think you might be right about the top-positioning.

/claus

[davidpbrown]

I've got little ticks to appear alongside visited links in a menu of mine, but can't narrow it down from all the links on the page to only those in the menu div.

Apologies for a stupid syntax question - but how do you select *only* the visited links in the menu div?

I've now tried alsorts of combinations having initially expected a#menu:visited to work. (This in IE6 if that makes a difference)

[Nick_W]

[dbaron.org...]

Think that's what you're after Hester..

Nick

[claus]

davidpbrown:
>> having initially expected a#menu:visited to work

this one: #
- will not work for multiple links in a navigation field, as it is an ID selector, and only one item on each page can have the same id. Try making it a class in stead of an id, using any of the syntaxes Nick_W posted, they should really work in IE as well, otherwise try this:

.menu:visited {
... stuff ...
}

and the menu links:

<a href="something" class="menu">something</a>

/claus

[davidpbrown]

Thanks for that claus.. works now.

I'd expected of course assigning behaviour to a div would cascade to it's contents.. I have a lot to learn.

:)
davidpbrown

[Hester]

Nick, thanks. That's the page I saw before.

Suzy, I wasn't trying to copy the idea of using only one background image, since I had already completed my code the night before I saw the article. A great idea! I would consider using it except that links that spill over onto 2 lines would probably show more than one icon?

It is of course the ideal solution to avoid flicker when loading a new image (eg: on hover). Meanwhile I plan to preload the images simply by placing them in a div off the screen.

I forgot about using an active link graphic too. I could create an icon that moves right and down slightly, so it looks like the user is pressing a button in when they click on the link.

[MonkeeSage]

The single image / background position trick is how you save time in building a mozilla chrome as well, except you use an image region rect(). Very nice to learn that the same thing can be done with regular markup and standard CSS! :)

Jordan

[SuzyUK]

Hester, sorry I picked you up wrongly :(

A great idea! I would consider using it except that links that spill over onto 2 lines would probably show more than one icon?

I was already using the pixy's theory to write an article which demonstrates the problems you mention..

I have a working example where the "bullet" centers vertically and there is no spill over on text resize..

The trick is to use a horizontal graphic instead of the vertical one in pixy's example..

Suzy

[MonkeeSage]

SuzyUK:

A small suggestion that might solve some of your "white space" woes on this issue is to remove all space from the picture and make it only image1 width * 3 wide, and image1 height tall for horizontal, and opposite for vertical. That way you get two benefits; smaller image size (faster loading) and can position the container you're overlaying it into however you want with no guessing about how much "white space" at different resolutions. That's the way I do it for making chrome buttons and such that have hilite states and it seems to work well. Though I haven't tried the HTML version I imagine it would work out the same way.

Jordan

[SuzyUK]

Jordan..

Thanks for the suggestion, although I don't thing it would work (for me anyway ;)), but I can see your reasoning..

with the horizontal graphic you would see more than one "state" at any one time.

and with the vertical graphic, text zoom (presuming your that your link height is set to the same height as graphic in the first place..) would "reveal" more of the graphic than you want it to.

Suzy

[Hester]

The trick is to use a horizontal graphic instead of the vertical one in pixy's example..

Actually I think a vertical graphic would be better. Links can be one long line. How would you hide the other pictures in the backround to show just one? Unless the graphic was extremely wide?

I've now thought of using a single image and adding enough space between each icon to be able to hide them. Assuming a maximum height between them (allowing for text resizing to a point) you could have a tall image that would work. (With each icon spaced out.)

My new code solves the problem by preloading the images in a hidden div on the page:

<div id="hidden">
<img src="images/link-orange.gif" width="10" height="11" alt="" />
<img src="images/link-red.gif" width="10" height="11" alt="" />
<img src="images/link-yellow.gif" width="10" height="11" alt="" />
</div>