html元素<map>是用于標(biāo)記帶有可點(diǎn)擊熱點(diǎn)區(qū)域的圖像，但必須使用<area>標(biāo)簽才能在圖像上創(chuàng)建可點(diǎn)擊的熱點(diǎn)區(qū)域，下面，我們就一起來學(xué)習(xí)吧.

<map> 標(biāo)簽定義

<map> 標(biāo)簽是定義一個(gè)帶有可點(diǎn)擊熱點(diǎn)區(qū)域的圖像，有的地方叫圖像映射；

<map> 標(biāo)簽已被所有主流瀏覽器支持；

<area> 標(biāo)簽始終嵌套在 <map>和</map> 標(biāo)簽之間；

<map> 標(biāo)簽用法

<area>標(biāo)簽用于創(chuàng)建不同形狀的圖像熱點(diǎn)區(qū)域，<area>標(biāo)簽永遠(yuǎn)嵌套在<map>和</map>標(biāo)簽之間。

<img src="image.jpg" usemap="#mymap" />
<map name="mymap" id="mymap" >
<area shape="rect"  coords="25,30,131,131"  href="a.html" target="_blank" >
<area shape="circ"  coords="200,75,46"  href="b.html" target="_blank">
<area shape="poly"  coords="52,207,137,155,210,225,168,317,70,304"  href="c.html" target="_blank">
</map>

<img>標(biāo)簽中的usermap="#mymap"屬性中的mymap必須和<map>標(biāo)簽中name和id屬性值中的mymap名稱相同；

以上代碼在瀏覽器中顯示出現(xiàn)，我們只要點(diǎn)擊圖像上的矩形、圓形、多邊形熱點(diǎn)區(qū)域，就可以分別跳轉(zhuǎn)至相應(yīng)的a.html、b.html、c.html頁面，動(dòng)畫效果演示如下：

<area> 標(biāo)簽中的coords屬性是設(shè)置熱點(diǎn)區(qū)域坐標(biāo)位置的，它可以設(shè)置三種不同熱點(diǎn)區(qū)域形狀，分別是rect（矩形）、circ（圓形）、poly（任意多邊形）：

1、創(chuàng)建矩形熱點(diǎn)（rect）：

<area shape="rect" coords="x1,y1,x2,y2" href="url" />

其中，shape="rect"是創(chuàng)建矩形熱點(diǎn)，對(duì)應(yīng)的coords="x1,y1,x2,y2"，而x1,y1是矩形熱點(diǎn)的左上角坐標(biāo)，x2,y2是矩形熱點(diǎn)的右下角坐標(biāo)；

2、創(chuàng)建圓形熱點(diǎn)（circ）：

<area shape="circ" coords="x1,y1,r" href=url  />

其中，shape="circ"是創(chuàng)建圓形熱點(diǎn)，對(duì)應(yīng)的coords="x1,y1,r"，而x1,y1是圓形熱點(diǎn)的圓心坐標(biāo)，r是圓形熱點(diǎn)的半徑長度；

3、創(chuàng)建任意多邊形熱點(diǎn)（poly）：

<area shape="poly" coords="x1,y1,x2,y2,x3,y3,....." href=url />

其中，shape="poly"是創(chuàng)建多邊形熱點(diǎn)，對(duì)應(yīng)的coords="x1,y1,x2,y2,x3,y3,....."，而x1,y1是多邊形熱點(diǎn)的一個(gè)點(diǎn)坐標(biāo)，依次是第二個(gè)點(diǎn)坐標(biāo)x2,y2，第三個(gè)點(diǎn)坐標(biāo)x3,y3，第N個(gè)點(diǎn)坐標(biāo)；由于瀏覽器會(huì)自動(dòng)閉合多邊形，所以尾部坐標(biāo)不必與第一個(gè)坐標(biāo)相等。任意多個(gè)點(diǎn)可創(chuàng)建形狀不同的多邊形圖形。

如果某個(gè)<area>標(biāo)簽中的坐標(biāo)和其他<area>標(biāo)簽創(chuàng)建的熱點(diǎn)區(qū)域發(fā)生了重疊，會(huì)優(yōu)先采用最先出現(xiàn)的 <area>標(biāo)簽，瀏覽器就會(huì)忽略超過圖像邊界范圍之外的坐標(biāo)。

shape屬性值相關(guān)說明：

1、設(shè)置矩形的shape屬性值，可以是縮寫詞rect，也可以是全稱rectangle；

2、設(shè)置圓形的shape屬性值，可以是縮寫詞circ，也可以是全稱circle；

3、設(shè)置多邊形的shape屬性值，可以是縮寫詞poly，也可以是全稱polygon；

<map> 標(biāo)簽屬性