HTML 標籤

HTML 標籤

原創

miniminixu

2020-02-22 02:17

一、定義

將圖片劃出熱點區域，定義不同的超鏈接

二、兼容性

兼容所有主流瀏覽器

三、用法

<img src="圖片路徑" usemap="#map標籤的ID或name" alt="圖片名" />
<map name="usemap的值" id="usemap的值"><!--這裏是用name還是id取決於瀏覽器，所以要都寫-->
  <area shape="熱點區域形狀" coords="區域對應座標" href ="熱點對應鏈接" alt="熱點名" />
  <area shape="熱點區域形狀" coords="區域對應座標" href ="熱點對應鏈接" alt="熱點名" />
  <area shape="熱點區域形狀" coords="區域對應座標" href ="熱點對應鏈接" alt="熱點名" />
</map>

四、主要屬性對應參數詳解

①shape
a、 shape=”rect”：矩形
b、 shape=”circle”：圓形
c、 shape=”poly”：多邊形

②coords
a、 rect矩形：必須使用四個數字，前兩個數字爲左上角座標，後兩個數字爲右下角座標
例：<area shape=rect coords=100,50,200,75 href="URL">

b、 circle圓形：必須使用三個數字，前兩個數字爲圓心的座標，最後一個數字爲半徑長度
例：<area shape=circle coords=85,155,30 href="URL">

c、 poly任意圖形（多邊形）：將圖形之每一轉折點座標依序填入
例：<area shape=poly coords=232,70,285,70,300,90,250,90,200,78 href="URL">

五、實例

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />
</map>

六、area對象完整屬性

屬性	值	描述
alt	text	規定區域的替代文本。如果使用 href 屬性，則該屬性是必需的。
coords	coordinates	規定區域的座標。
href	URL	規定區域的目標 URL。
hreflang*	language_code	規定目標 URL 的語言。
media*	media query	規定目標 URL 是爲何種媒介/設備優化的。默認：all。
nohref	nohref	HTML 5 中不支持。
rel*	alternate author bookmark external help license next nofollow noreferrer prefetch prev search sidebar tag	規定當前文檔與目標 URL 之間的關係。
shape	rect rectangle circ circle poly polygon	規定區域的形狀。
target	_blank _parent _self _top framename	規定在何處打開目標 URL。
type*	mime_type	規定目標 URL 的 MIME 類型。