Building a menu with nice pictures often give a better impression to a website. If you care about the roll-over aspect you will also preload your images so you don’t get this annoying flickering effect when you wait for the image to be loaded.

A common technique is to use javascript to perform the preloading. All right, not to much to do for one button, but for ten? And if your user doesn’t allow javascript?

An other way to do it is to use a css technique. The concept is fairly simple, create one image with the two states of your button (normal, hover) and use the :hover pseudo class to swap the position of the image.

Each state need to have the same height as your button, so your image as twice the height of a button:

Normal state

Hover state

The image you need for the preloading

When your image is ready you just need to display it as the background of your link and align it to the top.

#menu a { background:#fff url(images/home.png) no-repeat top left; }

If your link as the same height as the normal state your user wont see the hover state. Now add the :hover pseudo-class to your link and swap the background position from top to bottom.

#menu a:hover { background:#fff url(images/home.png) no-repeat bottom left; }

That’s it. However that’s for one button. For a row of links it is better to create one big image with all the background normal and hover, and swap the position. You will need to give an id for each of your links and position your background well for each of them. But know you have the basis it shouldn’t be to much trouble.