代碼如下：

<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的樣式設置 */