在瀏覽網頁時會發現，當單機一張圖片的不同區域時會顯示不同的連結內容，這就是圖片的熱點區域。所謂圖片的熱點區域就是將一個圖片劃分成若干個連結區域。訪問者單擊不同的區域會連結到不同的目標頁面

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

      <img src="圖片地址"  usemap="#名稱"  />

       <map id="#名稱">

                   <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,86,38"  href="#"/>

       </map>

          在上面的語法格式中，有幾點需要注意

          (1)要想建立圖片熱點區域，必須先插入圖片。注意，圖片必須新增usemap屬性，說明該影象是熱區對映影象，屬性值必須以"#"開頭，如#pic。那麼上面一行程式碼可以修改為：<img  src="圖片地址"  usemap="#pic"/>

          (2)<map>標記只有一個屬性id，其作用是為區域命名，屬性值必須與<img>標記的usemap屬性值相同，修改上述程式碼為:<map id="#pic">

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

                        shape屬性，控制元件劃分區域形狀，其取值有3個，分別是rect(矩形)、circle(圓形)和poly(多邊形)

                        coords屬性，控制區域的劃分座標

                                  如果shape屬性取值為rect,那麼coords的設定值分別為矩形的左上角x、y座標點和右下角x、y座標點，單位為畫素

                                  如果shape屬性取值為circle，那麼coords的設定值分別為圓形圓心x、y座標點和半徑值，單位為畫素

                                 如果shape屬性取值為poly，那麼coords的設定值分別為多邊形的在各個點x、y座標，單位為畫素

                        href屬性是為區域設定超連結的目標，設定值為"#"時，表示為空連結