转。。。http://www.rainweb.cn/article/219.html
——————————————————————————————————————————————————————————————
当一个页面的图片在没有使用任何方案的情况下，五个图片超链接就只能使用五个图标按钮。
代码如下：
<div style="border: 2px ridge rgb(51, 51, 51); background-color: rgb(244, 245, 235); width: 200px; padding-top: 4px;">
<center>
<a href="javascript:alert('Home')" title="Home"><img src="images/home.gif" border="0"></a> <a href="javascript:alert('Gift')" title="Gift"><img src="images/gift.gif" border="0"></a>
<a href="javascript:alert('Cart')" title="Cart"><img src="images/cart.gif" border="0"></a>
<a href="javascript:alert('Settings')" title="Settings"><img src="images/settings.gif" border="0"></a>
<a href="javascript:alert('Help')" title="Help"><img src="images/help.gif" border="0"></a>
</center>
</div>
注意：这五个按钮分别使用了五张图片
查看演示
那么，五张图片就意味着你的该页面又多了五个HTTP请求，它将大大降低页面的呈现效率。增加的HTTP请求是导致页面性能下降的最大刽子手，所以我们应该尽量减少HTTP请求，而图片是增加HTTP请求的最大可能者，搞定它，事不宜迟！呵呵^_^
下面列出了三种解决方案：
方案一：图片地图（图像热点）：它将用户的点击映射到一个操作，而无需向后端Web服务器发送任何请求。
代码如下：
<div class="panel_div" style="border:2px ridge #333333;background-color:rgb(244, 245, 235);width:180px;padding:4px 0px 0px 2px;">
<img usemap="#mymap" src="images/imagemap.gif" border="0" />
<map name="mymap"> <!-- img使用的map -->
<area shape="rect" coords="0,0,31,31" href="javascript:alert('Home');"/>
<area shape="rect" coords="36,0,66,31" href="javascript:alert('Gifts');"/>
<area shape="rect" coords="71,0,101,31" href="javascript:alert('Cart')"/>
<area shape="rect" coords="106,0,136,31" href="javascript:alert('Set')"/>
<area shape="rect" coords="141,0,171,31" href="javascript:alert('Help')"/>
</map>
</div>
注意：这五个按钮其实是在一张图片中
查看演示
方案二：CSS Sprites：使用这种方式也可以将五张图片合并为一张图片，并且更为灵活。
代码如下：
<style>
/* 对div中所有span的样式设置 */
#navbar span {
/* 定义<span>标签将截取的图片宽度和高度 */
width:30px; height:31px;
/* 添加包含了所有图标的图片 */
background-image:url(images/imagemap.gif);
display:inline; float:left;
}
/* background-position：指定图标在CSS Sprites图片的偏移量
margin-left 和 margin-right 则用来定位图标位置
*/
.home { background-position:0 0; margin-left:2px;}
.gifts { background-position:-35px 0; margin-left:50px;}
.cart { background-position:-70px 0; margin-left:120px;}
</style>
<div >
其中“asdfghjklaasdvdddddddaaaaaddddd++ddd======ssswdvdv33”就是该图片的数据。
data: URL模式-> 基本用于内联图片，可以用在任何需要指定URL的地方，如：script和a标签中。
3、内联图片的缺陷：
a> 不受IE的支持（IE7也如此）；
b> 保存数据的大小上受限制（Firefox 1.5支持高达100KB的数据）；
c> Base64编码会增加其图片的大小；
d> 在跨越不同页面时不会被缓存
（可以将内联图片作为背景图片保存在外部CSS样式表中来解决此问题，但会增加一个HTTP请求以换得数据被缓存的结果。）；
本人推荐：根据具体情况，使用方案一：图片地图（图像热点）或方案二：CSS Sprites。