I've always found it annoying when I have to wait for a rollover image to load when I hover on a link. Of course, one solution is to preload everything, but that takes a lot of time, effort and JavaScript.
There is another way. And, as with everything that's elegant in web development, it involves CSS. The basic drive for this method is the fact that a background image can be loaded into just about any element, and can be positioned in many places. For the no-preload rollover, we take an image like this:
Note that the image has two sections, and they're the same size. This'll come into play for the rollover.
Now we place this image as the background for a block-display anchor, which has the size of one of the sections, with the caveat that it's positioned in the top left corner. That means that we only see the top section of the image; the bottom is cut off by the end of the anchor.
For the :hover state of the block anchor, we move the position of the
background to the bottom left. Now, the image is drawn from the bottom
up, and only the bottom section is seen. Hence, we have rollover.
a {
display: block;
width: 81px;
height: 81px;
background: url(test.png) no-repeat top left;
}
a:hover {
display: block;
width: 81px;
height: 81px;
background: url(test.png) no-repeat bottom left;
}
<a href='#'> </a>