12
|
Chapter 1: Rule 1: Make Fewer HTTP Requests
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 back-
ground image using the CSS
background-position property. For example, you can
use the "My" icon for an element's background image as follows:
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 sin-
gle 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:
Figure 1-2. CSS sprites combine multiple images into a single image
Articles in this issue
Archives of this issue
view archives of flash service - High_Performance_Web_Sites