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, making the effect instantaneous.
a {
display: block;
width: 200px;
height: 63px;
background-image: url(images/toucancombo.jpg);
text-decoration: none;
text-indent: -999em;
}
a:hover {
background-position: bottom;
}
The technique can be extended further by accommodating other link states such
as active and having an image file with additional portions.
There's a (tiny) little problem with this technique. If Internet Explorer is set to "check for newer versions of pages" on every visit (which it isn't by default), then every time the properties of a background (including background-position) are changed in any way, the browser will take a peek at the server to see if the image is different, causing a delay and a flicker. This can be fixed by applying the background image to a containing element as well as the a element. For example, if you had a navigation block, with a elements inside li elements, then the problem can be fixed by applying a background image to the li elements as well as the a elements.
