一、熱點的原理
圖片通過usemap="#Map"屬性將名稱為"Map"的熱點區域及連接映射到圖片上。
一般來說，圖片的usermap屬性對應的是map熱點的name的屬性值。所以如果頁面中如果有多個圖片添加熱點，那麼每一個圖片的usemap值跟對應的熱點地圖的name值一定要一樣，且不同的熱點區域name值不可以相同，如果相同，那麼圖片上的熱點區域將會以相同名稱的第一個熱點區域為准。
二、要設置圖片的熱點鏈接要用到三種標簽：<img><map><area>
1、shape：定義熱點形狀
shape=rect： 矩形
shape=circle：圓形
shape=poly： 多邊形
2、coords： 定義區域點的坐標
a.矩形：必須使用四個數字，前兩個數字為左上角座標，後兩個數字為右下角座標
例：<area shape=rect coords=100,50,200,75 href="URL">
b.圓形：必須使用三個數字，前兩個數字為圓心的座標，最後一個數字為半徑長度
例：<area shape=circle coords=85,155,30 href="URL">
c.任意圖形（多邊形）：將圖形之每一轉折點座標依序填入
例：<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">
三、實例
<img src="../menu。gif" width="204" height="510" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="12,37,181,88" href="URL1" onFocus="this.blur()"/>
<area shape="rect" coords="12,97,182,143" href="URL2" />
<area shape="rect" coords="18,155,179,200" href="URL3" />
<area shape="rect" coords="18,211,182,260" href="URL4" />
</map>
/*其中 onFocus="this.blur()" 表示去掉虛線框 */