CSS Design: Mo’ Betta Rollovers

The rollover effect – simple interaction that assists usability. If your design is consistent, a user will only have to experience the effect once to understand what it does throughout your entire site, which makes my HCI guy giggle with delight.

For years we’ve been preloading our on–state images to assist the browser in its rollover presentation. Preloading increases the weight of the initial download, but adds to usability by decreasing the wait time for an on–state image to appear. Decreases, but may not eliminate. Even when preloaded, some browsers present momentary pauses prior to rendering the image.

Besides being annoying, this momentary pause can cause problems when a visitor mouses over an element in passing or too rapidly. If the mouse movement is too fast, the browser does not have time to render the image and, worst–case scenario, can present you with a broken image icon.

Coding with Emeril#section2

For optimum usability, a rollover must be instantaneous – BAM! – or the effect is diminished. It is drastically diminished in those cases when the on–state is not preloaded properly, or at all, and the browser has to return to the server for the file. Even with a high–speed connection, this can drastically hamper the visitor’s experience.

The solution? Don’t swap images.

Note: The following example will display correctly in IE5+ and Opera 6+. In this author’s opinion, Mozilla/Netscape 6’s handling of the CSS leaves room for improvement, which will be addressed later.

Thanks to the wonder that is CSS, we can spontaneously change the background color. Since the browser does not have to reference an additional file, the effect is immediate and rewarding. (Obviously, this requires the cooperation of the designer: background colors must be solid; textual or iconic elements cannot be anti–aliased; and, in these examples, the image must be a GIF.)

The above was achieved on this page via the following CSS:

img.ala {background: transparent;}

a.ala {background: #fff;}

a.ala:hover {background: #fcc;}

…and the following HTML:

<a href="foo.html" class="ala">
<img class="ala" src="foo.gif" /></a>

This is an extremely graceful option as it provides an immediate reaction to the visitor’s actions, and has the added benefit of being safely ignored by a browser that doesn’t understand it.

By the way, if you want to change the text color instead of the background color, the CSS method is the same; only the image preparation is different. Instead of the background image being transparent, the text is. In effect, you create a stencil for each element. The background color will show through your stencil revealing your text. Change the background color as shown, and you’re in like Flynn.

Unfortunately, in my experience (and I’m experiencing it now), NS6 occasionally does not render the background color correctly, so I beef up the CSS with redundant JavaScript.

Beef it up#section3

As long as we’re adding scripts, we can beef up our nav a bit, adding impact and usability to give it that extra “value–added” flavor.

Note: the script that follows is designed to work with IE5+, Mozilla/Netscape 6 and Opera 6. If you want code that will work on other browsers, you can use the cross–platform DOM utilities include file, developed in a previous ALA article.

{Several readers have reported a “jumping” bug in IE6 on some platforms that affects the DOM-based example shown next. We reported the bug to Microsoft in March, 2002. Thanks to all who sent screen shots and reports. – Ed.}

Yes, I know the color scheme is less than lovely, but I think it makes the point. The JavaScripting concepts used here are not difficult; it’s merely a matter of using the DOM to get at what you want. By manipulating multiple elements, we can make our rollovers convey extra information without sacrificing performance.

My user, my self#section4

The amount of time it takes your rollovers to activate may seem trivial, but it’s just one more way to tighten up your sites. I know that my designers notice. I don’t know if the users notice, but, you know what? I don’t care. I just care that they don’t notice a hole in their experience.