CSS Sprites
Like image maps, CSS sprites allow you to combine images, but they're much more flexible. The concept reminds me of a Ouija board, where the planchette (the viewer that all participants hold on to) moves around the board stopping over different letters. To use CSS sprites, multiple images are combined into a single image, similar to the one shown in Figure 3-2. This is the "Ouija board."

Figure 3-2. CSS sprites combine multiple images into a single image
The "planchette" is any HTML element that supports background
images, such as a SPAN or DIV. The HTML element is positioned over the
desired part of the background image using the CSS background-position property. For example, you
can use the "My" icon for an element's background image as
follows:
<div style="background-image: url('a_lot_of_sprites.gif');
background-position: −260px −90px;
width: 26px; height: 24px;">
</div>I modified the previous image map example to use CSS sprites. The
five links are contained in a DIV
named navbar. Each link is wrapped
around a SPAN that uses a single
background image, spritebg.gif, as
defined in the #navbar span rule.
Each SPAN has a different class that
specifies the offset into the CSS sprite using the background-position property:
<style> #navbar span { width:31px; height:31px; display:inline; float:left; background-image:url(/images/spritebg.gif); } .home { background-position:0 0; ...