html--建立熱點區域
阿新 • • 發佈:2018-10-31
在瀏覽網頁時,通常會出現在點選一張圖片不同區域時,出現不同連結內容的情況,這就是圖片的熱點區域。所謂的熱點區域,就是將一張圖片劃分成若干連結區域,訪問者單擊不同的區域,會連結到不同的目標頁面。
在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:該屬性為區域設定超連結的目標,設定值為“#”時,表示為空連結。