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

　　在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：該屬性為區域設置超鏈接的目標，設置值為“#”時，表示為空鏈接。

html--創建熱點區域