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. Read more…

• How to create a good css
• Top CSS Resources List
• Top CSS Tips
• What is CSS Framework
• 100+ CSS Tutorials
• 150+ CSS Samples
• Top 100 CSS Tips
• Top One Line Css Tips
• Clean CSS Tips
• CSS Sitemap design Tutorial