Figure 7-6. AOL menu sprite, dir_sprite.png (truncated)

Chapter 7 - CSS Optimization

Then AOL sets the background of each directory class (as well as some other IDs) to dir_sprite.png (see Figure 7-6):

.d1, .d2, .d3, .d4, .d5, .d6, .d7, .d8, .d9, .d10, .d11, .d12, .d13, .d14, .d15,
.d16, .d17, .d18, .d19, .d20, .d21,.d22, .d23, .d24, .d25, .d26, .d27, .d28, .d29,
.d30, .d31, #aim_sprTbEdt, #games_sprTbEdt, #sports_sprTbEdt, #weather_sprTbEdt,
#radio_sprTbEdt, #horoscopes_sprTbEdt, #video_sprTbEdt {
background:transparent url("dir_sprite.png") no-repeat 4px 0;
}

This rule assigns the background image of the directory sprite to these classes and IDs. For the subsequent directory menu items, it is just a matter of shifting the background image up 36 or 38 pixels to show each subsequent icon.

.d2 {
background-position:4px -36px;
}
.d3 {
background-position:4px -74px;
}
.d4 {
background-position:4px -112px;
}

So, when you assign the class .d2 for finance, it shifts the background up 36 pixels, showing the Finance icon (clipping within the dimensions of the list item with overflow:hidden). The assignment of the sprite as a background to multiple classes, and the shifting of background-position for each class, is the essence of CSS sprites. The HTML code looks like this for the directory:

<div id="cols">
<div id="sm_col">
...
<a name="dir"><h6>Directory</h6></a><div class="dir">
<ul id="om_dir_col1_" class="serv c">
<li><a id="d1" class="d1" href="http://autos.aol.com/?ncid=AOLCOMMautoNAVIdira0001">
Autos</a></li>
<li><a id="d2" class="d2" href="http://money.aol.com">Finance</a></li>
<li><a id="d3" class="d31" href="http://food.aol.com">Food</a></li>
<li><a id="d4" class="d3" href="http://games.aol.com">Games</a></li>
<li><a id="d5" class="d4" href="http://body.aol.com">Health & Diet</a></li>...</ul>

Figure 7-6. AOL menu sprite, dir_sprite.png (truncated)