The rules described in later chapters also present guidelines that help reduce the number of
HTTP requests, but they focus primarily on subsequent page views.
Image Maps
Image Maps
<img usemap="#map1" border=0 src="/images/imagemap.gif">
<map name="map1">
<area shape="rect" coords="0,0,31,31" href="home.html" title="Home">
<area shape="rect" coords="36,0,66,31" href="gifts.html" title="Gifts">
<area shape="rect" coords="71,0,101,31" href="cart.html" title="Cart">
<area shape="rect" coords="106,0,136,31" href="settings.html" title="Settings">
<area shape="rect" coords="141,0,171,31" href="help.html" title="Help">
</map>
CSS Sprites
1 <style>
2 #navbar span {
3 width:31px;
4 height:31px;
5 display:inline;
6 float:left;
7 background-image:url(/images/spritebg.gif);
8 }
9 .home { background-position:0 0; margin-right:4px; margin-left: 4px;}
10 .gifts { background-position:-32px 0; margin-right:4px;}
11 .cart { background-position:-64px 0; margin-right:4px;}
12 .settings { background-position:-96px 0; margin-right:4px;}
13 .help { background-position:-128px 0; margin-right:0px;}
14 </style>
Inline Images
Inline Images
1 <IMG ALT="Red Star"
2 SRC="data:image/gif;base64,R0lGODlhDAAMALMLAPN8ffBiYvWW
3 lvrKy/FvcPewsO9VVfajo+w6O/zl5estLv/8/AAAAAAAAAAAAAAAACH5BAEA
4 AAsALAAAAAAMAAwAAAQzcElZyryTEHyTUgknHd9xGV+qKsYirKkwDYiKDBia
5 tt2H1KBLQRFIJAIKywRgmhwAIlEEADs=">
Combined Scripts and Stylesheets
