Simple, Instant Rollover Images

It drives me nuts when I see a really nice-looking website that features rollover buttons that, when hovered over, disappear while the browser grabs the hover state image. That’s not how you’re supposed to do it!

The problem is that the coders of these websites used two images: one for the normal state, and one for the hover state. Thus, the browser grabs the normal state on loading the page, but grabs the hover state as the cursor hovers over the image.

Assuming that your internet connection isn’t a 100Mb/s fiberoptic pixie-dust-powered monster, you can see the example of the problem here.

This is hardly a new phenomenon, and there are plenty of solutions to the problem (this one Dan Cederholm wrote in 2003 is my favorite, if more complex than necessary today), but I still see it often enough that many designers must not have read them. So, I’m going to present my own simple example here.

The key is to combine all your images for the button into one background image, and use CSS to move that background image when the link is hovered or clicked. So, instead of:

#bacon a {
    background: url(bacon-off.png) no-repeat top left;
}

    #bacon a:hover {
        background: url(bacon-on.png) no-repeat top 
        left;
    }

    #bacon a:active {
        background: url(bacon-click.png) no-repeat top 
        left;
    }

…you will use:

#bacon a {
    background: url(bacon.png) no-repeat top left;
}

    #bacon a:hover {
        background: url(bacon.png) no-repeat center 
        left;
    }

    #bacon a:active {
        background: url(bacon.png) no-repeat bottom 
        left;
    }

This is illustrated in the demo. The old buttons will flicker, or disappear entirely for a few seconds, depending on the speed of your connection. The new ones change states instantaneously once they are loaded.

This is a very simple implementation of CSS Sprites. Not only do they increase the speed of the UI elements on the page, they can decrease the server load as well (less requests). Take a look at Amazon’s massive image that they use - one single image for countless buttons and links. Something unnecessary for most websites, perhaps, but something worth learning about anyway.

If you want to learn more about the technique, check out these tutorials: