1. 程式人生 > >html--建立熱點區域

html--建立熱點區域

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

  在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:該屬性為區域設定超連結的目標,設定值為“#”時,表示為空連結。