在瀏覽網頁時，通常會出現在點選一張圖片不同區域時，出現不同連結內容的情況，這就是圖片的熱點區域。所謂的熱點區域，就是將一張圖片劃分成若干連結區域，訪問者單擊不同的區域，會連結到不同的目標頁面。

　　在HTML5中，可以為圖片建立3中型別的熱點區域：矩形，圓形和多邊形。建立熱點區域使用<map>和<area>標記，其語法格式如下：

<img src="圖片地址" usemap="#名稱">
<map name="#名稱"
      <area shape="rect" coords="10,10,100,100" href="#">
      <
 
area shape="circle" coords="120,120,50" href="#">
      <area shape="poly" coords="78,13,81,14,53,32,85,38" href="#">
</map>

在以上語法格式中，需要注意以下幾點。

(1)  要想建立圖片熱點區域，必須先插入圖片。注意，圖片必須增加usemap屬性，說明該影象是熱區對映影象，屬性值必須以“#”開頭，加上名字。

(2)  <map>標記只有一個屬性name，其作用是為區域命名，其設定值必須與<img>標記的usemap屬性值相同。

(3)  <area>標記主要是定義熱點區域的形狀及超連結，它有3個必需的屬性。

*shape:控制劃分區域的形狀，取值有3個，分別是rect(矩形)，circle(圓形),poly(多邊形)。

*coords：控制區域的劃分座標。如果shape屬性的取值為rect，那麼coords的設定值分別為矩形的左上角x,y座標點和右下角x,y座標點，單位為畫素；如果shape屬性值的取值為circle,那麼coords的設定值分別是圓形圓心x,y座標點和半徑值，單位為畫素；如果Shapes屬性的取值為poly，那麼coords的設定值分別為矩形各個點的x,y座標，單位為畫素。

*href：該屬性為區域設定超連結的目標，設定值為“#”時，表示為空連結。