Box of Tricks

by Joe Gillespie — Nov 1, 2002

Last month's article demonstrated some basic layout techniques based on the CSS box. This time, we'll try something a little more daring, but not difficult – using CSS for rollovers.

Most designers use JavaScript for rollover effects, either from an 'action' feature in their Web page editor or from a hand-coded script. Basically, the script just says; when the mouse is over this image, swap it for another one. When the mouse moves away from the image, put the original one back again. The whole purpose of the exercise is to provide visual feedback to the user that the image is an active, clickable link and is generally used for important, main menus.

For links of lesser importance, simple colour changes of text are usually sufficient. Using CSS, it is even possible to get rid of the underlining that usually identifies hyperlinked text – as long as you provide an alternative visual clue to show the difference between ordinary text and links.

In the example last month, the main menu used a:link, a:visited and a:hover to give a color change when the user moves the mouse over the text. In that particular instance, the purpose of the menu was unambiguous. It 'looks' like a menu and the actual words are ones that you would expect in a main navigational element. In fact, the color change is not really needed, the links are implied by the layout - think of it as a bonus! When the hyperlinks are mixed-in with regular text and there are no underlines to give clues to their function, color changes are much more important.

A tiny problem with using this global 'a:link, a:visited, a:hover' approach, is that all the linked text is always the same color. Well yes, that is perfectly consistent and logical, I hear you say but I find that a little bit restrictive, especially when we are talking about main menus. I like to color-code my menus, and not just because it looks pretty. Three traffic lights of the same colour would work. The top one means stop, the bottom one means go and the one in the middle means accelerate as fast as you can! Joking aside, the colour does help to differentiate the lights, and aids their recognition. Changing the color of menu items does much the same job.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float