CSS Image Rollovers

I, like many designers, love image rollovers. It's basically because it's a simple way to give a site some interactivity with the user.

Yet even after all these years, I still come across sites that have poorly implemented rollovers- ones that employ javascript or CSS based solutions that don't work correctly in IE or have that brief moment of load time that precedes the 'on' image making the 'off' image disappear.

So yes, old topic, but one that could use addressing.

Javascript

First of all, ditch the javascript. It's a heavy handed way of doing things that was necessary eight years ago for this effect, but isn't now. Javascript did two things that were important,

1. It preloaded images
2. It swapped images out when the mouse rolled over

If an image isn't preloaded, then we get that nasty load-effect. This is where the image is moused over, and the script has to go out and load the replacement image before it displays it. As for number 2, well that was the whole point. You needed a scripting language to make this thing work.

Also part of the problem, is that images for navigation elements don't play nicely with search engines. In this day and age of Google, Bing and Yahoo, that's a serious no-no, so that puts another nail in the javascript coffin.

CSS Solution

Using CSS for image rollovers is pretty slick and simple. The preloading of graphics isn't necessary, it can work very well with search engines, and it requires no scripting, just a little planning (but really, what doesn't?). The first thing we need to do is make an image.



Like this one, for example. Then we need to make the same image, except as an 'on' state.



Then the last step is to put both images into a single file, one on top of the other, like this.



By doing it this way, we don't have to worry about preloading a graphic, because both states are loaded by having a single image! Now, we need to create a link and give it a class that will reference our graphic as a background.

<a href="#" class="submit">Submit</a>

Ok, so those are the bones behind this. Pretty simple so far, right? The CSS to make it work is equally so.

a.submit {
	background: transparent url('button.gif') 0px 0px;
	display: block;
	width: 145px;
	height: 32px;
	text-indent: -999em;
}

a.submit:hover {
	background-position: 0px -32px;
}

That's it! What's going on here is, we are first making the link area a block so that we can give it the exact width and half the height of our button graphic. This makes it so that only the 'off' state of the button is viewable. Then we're specifying the exact position of the background, zero pixels from the left and top. That's what the two values are after the url of the graphic - left and top, respectively.

But what about the text-indent, what's that all about? That moves the actual text that appears within our anchor tag to a spot off the left of the screen. This does two things, first it makes it so that IE 6 will recognize that 145px by 32px area as a link. IE really hates it when you try to make an empty area act as a link, but if something is inside of it, it has no problem (even if it's indent is several thousand pixels to the left). Second, it makes it so that the link is search engine friendly. Granted with a submit button that isn't particularly important, but if this method was used for a full-on site nav, it definitely would.

The hover method is also straightforward, it simply shifts the position of our background image 32 pixels down. That makes it so that the 'off' portion is no longer visible, but the 'on' portion is.

Voila! A simple, search engine friendly, cross-browser compatible, no-script way of achieving the old image rollover.

Check out the attached zip file to see a working example.