Image Rollovers

Image rollovers are useful for navigation and layouts. Here's an example:

Make the two images that you want to use. Then put them together in one image, side by side, like this.

Now add this code to your site. Change the URL to whatever you want the image to link to.

<a href="PAGE URL" class="rollover"></a>

Add this to your CSS. Change the height to the height of the image you made earlier. Make the width half the width of the image. Change the background position to the same number as the width.

a.rollover {
display:block;
background: url("IMAGE URL") no-repeat;
width:WIDTHpx;
height:HEIGHTpx;
}
a.rollover:hover {
background-position: -WIDTHpx;
}

The negative background-position moves the image over so that it displays on hover. This way, you only need one image and it can load quickly.