Why single-file css-only rollover images?

The problems with using two files

Most of the image rollover techniques invented out there require two files. One for the normal state of the image, the second one for the hover state. When an user hovers their mouse cursor over the image, a small piece of Javascript usually changes the src attribute in the image tag to the hover image source. But this creates a problem: the browser has not loaded this hover image before, because it didn’t know it existed. So the browsers starts loading the image, but until that’s done, the original image disappears from the screen. And if the rollover images are used for navigation or menu purposes, it creates a whole lot of flickering that just doesn’t look good.

To prevent this, browsers would have to load the images in the start, when all teh other images and page elements are loaded. It’s called preloading.

Preloading hover images

Preloading images is a technique often used in Rollover Images or other image scripts which work more quickly when the images for them are loaded as soon as possible.
Usually this is achieved using Javascript or placing the hover images in the code and hiding them with CSS.

While Javascript is nice and works very well, some users still don’t have Javascript enabled and depending on the script used, You might have to write out each hover image for the script and if You have a lot of rollovers or You want Your rollover images generated dynamically (for example, for a  navigation bar).

I’d prefer placing images in the HTML and hiding them with CSS (applying display:none), but I just didn’t like the idea of having something in the HTML that shouldn’t be there.

My method of rollover images

For this method You only need one image file, one img tag, a span or anchor (link) tag and a little bit of CSS

Since I’m using this method right here, on ThemeSquirrel, I’ll take it as an example. I start by creating a single image that has both the normal and hover states in it. In the end, my image file looks like this:

Now for the markup and CSS. The idea is to make a container for the image that is only as high as half of the image. My image has a total height of 30px, so the container has to be 15px high, and overflow:hidden (This will hide everything that is beyond 15px).

HTML:

<span class="hover-image-container">
<img src="http://themesquirrel.net/wp-content/uploads/2009/09/menu-about.png" alt="alt-text" class="hover-image" />
</span>

CSS:

.hover-image-container {display:block; height:15px; overflow:hidden}
.hover-image:hover {margin-top:-15px}

The result:

“But wait! This doesn’t work in Internet Explorer 6!” – I can hear You saying. Well, screw IE6 I say. You can’t have everything with something from the prehistorical age. I don’t support it. Why should You?
(If You really want to, You can use some javascript to cranck IE6 up and make the rollover work)

Now let’s try this with a link

Most of the times You use rollover images inside links anyway, so we can just modify the code a bit (which should make it work in IE6 as well):

<a href="themesquirrel.net/about/" class="hover-image-container">
<img src="http://themesquirrel.net/wp-content/uploads/2009/09/menu-about.png" alt="alt-text" class="hover-image" />
</a>

.hover-image-container {display:block; height:15px; overflow:hidden}
.hover-image-container:hover img {margin-top:-15px}

The only problem right now is that since the anchor element is set to display:block, the anchor spans the whole width of it’s container, ie – when You move your cursor next to the image above, to the right, you can see the images hovering. I believe in most cases this would be an unwanted behavior, so there are two possible ways to fix this, either add a float:left to hover-image-container or change display:block into display:inline-block. Both methods should work well in IE6/7 as well. Here’s my try with inline-block:

Conclusion

So there You go – a method for Rollover Images that only requires CSS and no extra markup! (if You are using the rollover images as links anyway). I sure don’t want to say that this is the best method ever, or discredit all the other ways to do this, but I think it’s a nice way of doing this

If You have any comments, questions, additions, or maybe You want to point out a mistake, please drop me a line in the comments!