摘要：今天無意中發現了一組特別有意思的HTML標簽：map標簽和area標簽，查資料后總結一下：文檔：<map>：用于定義一個客戶端圖像映射。圖像映射（...

今天無意中發現了一組特別有意思的HTML標簽：map標簽和area標簽，查資料后總結一下：

文檔：

<map>：用于定義一個客戶端圖像映射。圖像映射（image-map）指帶有可點擊區域的一幅圖像。

<area>：定義<map>的可點擊區域

當<map>設置name或者id屬性時，<img>標簽的usemap屬性會根據<map>的id和name屬性來關聯<map>

<map>標簽：

必需的屬性：

id：unique_name 為 map 標簽定義唯一的名稱。

可選的屬性：

name：mapname 為 image-map 規定的名稱，name 屬性與 <img> 標簽的 usemap 屬性相關聯，創建圖像與映射之間的聯系。

<area>標簽：

必需的屬性：

alt：定義此區域的替換文本（它規定在圖像無法顯示時的替代文本）。

可選的屬性：

coords：

標簽的 coords 屬性定義了客戶端圖像映射中對鼠標敏感的區域的坐標。坐標的數字及其含義取決于 shape 屬性中決定的區域形狀?？梢詫⒖蛻舳藞D像映射中的超鏈接區域定義為矩形、圓形或多邊形等。

圓形：shape="circle"，coords="x,y,z"

矩形：shape="rectangle"，coords="x1,y1,x2,y2"

多邊形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."

shape：

default表示將定義整個區域為熱點

rect表示將定義一個矩形區域為熱點，(左上角頂點坐標為(x1,y1)，右下角頂點坐標為(x2,y2))

circle表示將定義一個圓形區域為熱點，(圓心坐標為(X1,y1)，半徑為r)

poly表示將定義一個多邊形區域為熱點，(各頂點坐標依次為(x1,y1)、(x2,y2)、(x3,y3) ……)

target：

_blank在新窗口中打開被鏈接文檔。

_self默認。在相同的框架中打開被鏈接文檔。

_parent在父框架集中打開被鏈接文檔。

_top在整個窗口中打開被鏈接文檔。

framename在指定的框架中打開被鏈接文檔。

href：

URL定義此區域的目標 URL。

map標簽和area標簽的用途：與img標簽綁定使用，常被用來賦予給客戶端圖像某處區域特殊的含義，點擊該區域可跳轉到新的文檔。

舉個例子：

<img src="map.png" alt="map" usemap="#planetmap" class="img">
<map name="planetmap" id="planetmap">
	<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" target=""_blank" />
	<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標簽的coords屬性的值不好獲取，我們可以借助PS工具或DW可視化來繪制熱點區域，可大大增加開發效率！