作用:
點擊圖片上不同形狀的區域觸發不同的事件
例子:
<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>
分析:
<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
src想要展示的圖片 border邊框 usemap使用map的id或者name(由瀏覽器決定) alt:如果該圖像無法顯示就展示那些字段
<map name="planetmap" id="planetmap">
id,name要跟上面的圖片的想對應
<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />
shape:類型 coords:坐標值參數 href:點擊后跳轉的頁面 alt:同上
圓形:shape="circle",coords="x,y,z"
x 和 y 圓心的位置("0,0" 是圖像左上角的坐標),z是以像素為單位的圓形半徑。
矩形:shape="rectangle",coords="x1,y1,x2,y2"
兩組坐標(x1,y1)(x2,y2)表示圖形的左上角和右下角的坐標是多邊形的一種簡化方法
多邊形:shape="polygon",coords="x1,y1,x2,y2,x3,y3,..."
定點的坐標組比如三角形要三個頂點就是三組坐標
擴展:
<area >
nohref="nohref" 表示除選擇以外的圖片的所有區域,比如一張圖片上選擇了一個方形區域,加上該屬性后則表示除了選擇的方形區域之外的所有區域
target ="_blank" 表示連接的方式同<a>標簽的該屬性
title="aaa" 表示鼠標懸浮提示
注意:
1、area 元素永遠嵌套在 map 元素內部。area 元素可定義圖像映射中的區域。
2、<img>中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性(取決於瀏覽器),所以我們應同時向 <map> 添加 id 和 name 屬性。