EFFECTS - CSS: Professional Techniques for Modern Layout - page 179

h is is extendable to any number of link states, right up to all of them. You could have
dif ering icons for unvisited, visited, hovered, focused, and active links (see Figure 5-29):
.navbar li a:link { background-position : 5px 50% ;}
.navbar li a:visited { background-position : -395px 50% ;}
.navbar li a:hover { background-position : -795px 50% ;}
.navbar li a:focus { background-position : -1195px 50% ;}
.navbar li a:active { background-position : -1595px 50% ;}
181
Figure 5-29: Sprited icons for various link states.
For that matter, you could set up an image that has stripes of icons and their variants for
dif ering types of links. You just need to set up each icon set in its own stripe with enough
vertical separation so that they don't show up in each others' links.
In that case, you then write vertical of sets in pixels for each type. Here's a snippet of what I
mean.
.navbar li a.internal:link { background-position : 0 0 ;}
.navbar li a.external:link { background-position : 50px 0 ;}
.navbar li a.internal:visited { background-position : 0 -400px ;}
.navbar li a.external:visited { background-position : 50px -400px ;}
You might think that this makes the image way bigger than two individual images, but it
actually doesn't. Because of the way the GIF algorithm works, the i le is basically the same size
whether the variant icons are separated by 4 pixels or 4,000 pixels, assuming all those inter-
vening pixels are the same (lack of ) color, as they are here. Once you factor in the extra size of
http headers and the load on the server to handle two connections, one for each image, it can
actually be more ei cient to use sprites.