HTML and CSS Reference
In-Depth Information
margin:0 0 10px 0;
text-decoration:none;
text-align:center;
background:#fff url(stars-dim.gif) no-repeat center center;
}
div.ex2 a:hover {
border:1px dotted red;
background:#fff url(stars.gif) no-repeat center center;
}
...
<div class="ex2">
<div><a href="nowhere.html">Hover over me</a></div>
<div><a href="nowhere.html">Hover over me</a></div>
</div>
Sprites: Using One Image for All States
In the techniques we discussed so far, we have a different image for the default background
and the hover background. When the visitor hovers over the link, only then will the server
retrieve the new image and display it. On a fast connection and with a small image, this should
be OK, but if you were to use this effect in less favorable circumstances, there might be a time lag.
A simple technique to get around this issue is to have both image states compiled into one
single image. Then, you display just one portion of that image to the visitor (imagine trying to
admire a work of art through a mailbox—that's the general idea). When the user hovers over
the link that acts as the trigger, the image is nudged along by however many pixels are required
to reveal the hover state. In Figure 8-17, you can see two stars: the dimmed default version and
the bright hover version. The image is 34 pixels wide and 15 pixels high. We'll set the container
element to be just 17 pixels wide, so only the first half of the image will show.
Figure 8-17.
The single image with the default and hover state included
The CSS required for this follows:
.ex3 {
background:#fff url(all-stars.gif) no-repeat 0 0;
display:block;
height:15px;
width:17px;
}
.ex3:hover {
background:#fff url(all-stars.gif) no-repeat
-17px 0
;
}
...
<a href="nowhere.html" class="ex3"></a>
