CSS Rollover Tips

You can turn textual links into graphical links with simple image replacement, and with the hover link state, you can create effective image rollovers that will swap one image for another when the cursor passes over the link.

An obvious solution would be to have two images and do something like this to swap one background image for another:

a {
	display: block;
	width: 200px;
	height: 63px;
	background-image: url(images/toucanfade.jpg);
	text-indent: -999em;
}

a:hover {
	background-image: url(toucan.jpg);
}

The trouble with this is that there will be a delay when the link is hovered over, as the image for the rollover downloads, making the effect far from instantaneous.

The way to get around this is to actually have just one image that comprises the two images you want, one on top of the other.

This image can be manipulated with the following CSS, which achieves the same result as the previous example, but because there is only one file involved, containing “two” images, everything necessary for the rollover is downloaded at once.

a {
	display: block;
	width: 200px;
	height: 63px;
	background-image: url(images/toucancombo.jpg);
	text-decoration: none;
	text-indent: -999em;
}

a:hover {
	background-position: bottom;
}