Image rollovers with CSS

Here’s how a plain text link can be converted into a pure image rollover using only CSS. You can see the result on the site’s logo.

If you’re not already familiar with ‘Fahrner Image Replacement’, read Doug Bowman’s article on Using Background-Image to Replace Text. This presented a guilt-free way of using images for titles, although it relied on a superfluous tag to hide the actual text. Not really a concern unless you were an absolute XHTML purist. The bigger problem was with JAWS screen readers, that treated text styled with ‘display:none’ as invisible and skips it.

The Gilder-Pixy Method

The following combines 2 techniques - Tom Gilders text-transform and Pixy’s no-preload rollovers. The former uses ‘text-indent: –10000em;’ to hide the text from view, while the latter changes the position of the background image, rather than loading a seperate image. This means that you have to create an image containing both states, like this. These methods avoid the need to use the Box Model hack, display:none or some convoluted route to preload the rollover state. Its small code, and the rollover is faster. Combining the 2 methods also allows you to use pure images, rather than the text link/background combination (such as A List Apart)

Here’s the code that went into the HTML:

    <div id="logo">
    <a href="/index.php" title="click to go back home">// hicksdesign</a>
    </div>

No presentational markup, its just a plain ol’ text link. Here’s the CSS to go with it:

#logo a {
    text-indent: –1000em;
    background: url(images/logo.png) no-repeat left top;
    width: 64px;
    height: 369px;
    display: block;
    overflow: hidden; /* For nested divs in Safari */
}

\* IE 5 hack \\\*/
#logo a {overflow: hidden;}
\* end hack \*/

#logo a:hover {
background-position: –64px 0px;
}

There are 2 changes to the original code. The addition of the display: block, as the <a> tag will be treated as an inline element rather than a block and nothing will show up. Also, if the rollover is placed inside an absolutely-positioned nested div, Safari throws up a huge horizontal scroll bar (presumably 1000em wide). The overflow:hidden stops this, but needs to be hidden from IE 5 Mac or else the image won’t visible.

Pros and Cons

This method allows you to create image based rollovers, without any need for javascript. Not that javascript is evil, but there are several advantages to using this method:

• Substantially less code.
• Works in IE 5-6 Win/Mac, Opera 7, Mozilla/Firebird/Camino and Safari.
• Users without CSS, or those using a different stylesheet will see the just plain text link.
• Search engines place little importance on <alt> tags, but plain text links are good. I’ve been told that text styled with display:none doesn’t count either, but I can’t confirm this.
• Javascript rollovers need an ‘onMouseOver’ and ‘onMouseOut’ event adding to the <a> tag. Accessibility validators pick up on this and request that you supply an alternative with <noscript>. A bit of a faff quite frankly.

The only disadvantages are:

• If the user has CSS on, but images turned off to improve browsing speed, they’ll see nothing. Ooops! Tom has a solution for this which requires an extra span tag.
• One other problem is a bug in Safari, where if you place the rollover in an absolutely positioned DIV the image doesn’t revert back when rolling out. Fortunately, I was able to position the logo DIV with margins instead (and decrease the amount of code needed in the process! Sweet!)

Thanks to Tom Gilder and Pixy for creating these methods!

Further Reading:

Dave Shea has written an article on Fahrner Replacement for Digital Web Magazine.