HTML圖片熱區map area的用法

<area>標記主要用於圖像地圖，經過該標記能夠在圖像地圖中設定做用區域（又稱爲熱點），這樣當用戶的鼠標移到指定的做用區域點擊時，會自動連接到預先設定好的頁面。其基本語法結構以下：

     <area 
     class=type 
     id＝Value  
     href＝url  
     alt＝text  
     shape＝area-shape  
     coods＝value> 

shape和coords：是兩個主要的參數，用於設定熱點的形狀和大小。其基本用法以下：

• <area shape="rect" coords="x1, y1,x2,y2" href=url>表示設定熱點的形狀爲矩形，左上角頂點座標爲（X1,y1），右下角頂點座標爲（X2,y2）。
• <area shape="circle" coords="x1, y1,r" href=url>表示設定熱點的形狀爲圓形，圓心座標爲（X1,y1），半徑爲r。
• <area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>表示設定熱點的形狀爲多邊形，各頂點座標依次爲（X1,y1）、（X2,y2）、（x3,y3） ......。

<area>標記是在圖像地圖中劃分做用區域的，所以其劃分的做用區域必須在圖像地圖的區域內，因此在用 <area> 標記劃分區域前必須用HTML的另外一個標記<map>來設定圖像地圖的做用區域，併爲指定的圖像地圖設定名稱，該標記的用法很簡單，即<map name="圖像地圖名稱"> ...... </map>。

 

HTML <area> 標籤格式：
<map><area /></map>

(這個標籤的做用就是在一張圖片中的某一特定位置定義一個(或多個)熱點可進行超連接)
手動添加一個熱點：選中一個圖片/屬性/選擇一種形狀如：矩形、圓形、多邊形等。
定義和用法
<area> 標籤訂義圖像映射中的區域（注：圖像映射指得是帶有可點擊區域的圖像）。
area 元素老是嵌套在 <map> 標籤中。
註釋：<img> 標籤中的 usemap 屬性與 map 元素 name 屬性相關聯，建立圖像與映射之間的聯繫。

【實例】：

帶有可點擊區域的圖像映射：
<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>
HTML 與 XHTML 之間的差別
在 HTML 中，<area> 沒有結束標籤。
在 XHTML 中，<area> 必須正確地關閉。

提示和註釋：
註釋：<img> 中的 usemap 屬性可引用 <map> 中的 id 或 name 屬性（由瀏覽器決定），因此咱們須要同時向 <map> 添加 id 和 name 兩個屬性

 
標準屬性
id, class, title, style, dir, lang, xml:lang, tabindex, accesskey
如需完整的描述，請訪問標準屬性。

事件屬性
onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, 
onmouseout, onkeypress, onkeydown, onkeyup, onfocus, onblur 
如需完整的描述，請訪問事件屬性
建立圖像映射 本例顯示如何建立帶有可供點擊區域的圖像映射。其中的每一個區域都是一個超級連接。
HTML <area> 標籤的 coords 屬性

定義和用法
coords 屬性規定區域的 x 和 y 座標，(該座標是相對圖片的座標，即圖像左上角的座標是 "0,0")。
coords 屬性與 shape 屬性配合使用，來規定區域的尺寸、形狀和位置。

詳細解釋：
<area> 標籤的 coords 屬性定義了客戶端圖像映射中對鼠標敏感的區域的座標。座標的數字及其含義取決於 shape 屬性中決定的區域形狀。能夠將客戶端圖像映射中的超連接區域定義爲矩形、圓形或多邊形等。
下面列出了每種形狀的適當值：
圓形：shape="circle"，coords="x,y,z"
這裏的 x 和 y 定義了圓心的位置（"0,0" 是圖像左上角的座標），r 是以像素爲單位的圓形半徑。

多邊形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."
每一對 "x,y" 座標都定義了多邊形的一個頂點（"0,0" 是圖像左上角的座標）。定義三角形至少須要三組座標；高緯多邊形則須要更多數量的頂點。
多邊形會自動封閉，所以在列表的結尾不須要重複第一個座標來閉合整個區域。

矩形：shape="rectangle"，coords="x1,y1,x2,y2"
第一個座標是熱點矩形區域的一個角(左上角)的頂點座標，另外一個座標是熱點矩形區域的對角(右下角)的座標，"0,0" 是圖像左上角的座標。請注意，定義矩形其實是定義帶有四個頂點的多邊形的一種簡化方法。
例如，下面的 XHTML 片斷在一個 100x100 像素圖像的右下方四分之一處，定義了一個對鼠標敏感的區域，並在圖像的正中間定義了一個圓形區域。
<map name="map">
  <area shape="rect" coords="75,75,99,99" nohref="nohref">
  <area shape="circ" coords="50,50,25" nohref="nohref">
</map>
【實例】：
<img src ="planets.gif" alt="Planets" usemap ="#planetmap" />
<map name="planetmap">
  <area shape="rect" coords="0,0,110,260" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="129,161,10" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="180,139,14" href="venus.htm" alt="Venus" />
</map>
提示和註釋
註釋：若是某個 area 標籤中的座標和其餘區域發生了重疊，會優先採用最早出現的 area 標籤。瀏覽器會忽略超過圖像邊界範圍以外的座標。

 

---

 

【實際應用】

HTML 圖像地圖

什麼是圖像地圖?

       把一幅圖像分紅多個區域，每一個區域指向不一樣的URL地址。例如，將一幅中國地圖的圖像按照省市劃分爲若干個區域，這些區域就被稱爲熱點，單擊熱點區域，就能夠鏈接到與相應的省市有關的頁面，這就是圖像地圖。

 

怎麼製做?

1. 首先必須定義出圖像上的各個熱點區域的形狀，位置座標，及其指向的URL地址等信息，這個過程叫圖像熱點映射。圖像熱點映射須要使用<map name=mapname></map>標籤對進行說明，其中的name屬性爲該圖像熱點映射指定了一個名稱。
2. 圖像熱點映射中的各個區域用<area>標籤說明，<area>標籤的格式爲：<area shape="形狀" coords="座標" href="URL">，href部分也能夠用nohref替換，表示在該區域單擊鼠標無效。<area>標籤還能夠有一個target屬性，用來指明瀏覽器在哪一個窗口或者幀中顯示href屬性所指向的網頁資源。
3. 定義好了圖像熱點以後，接着就要在<img> 圖像標籤中增長一個名爲usemap的屬性設置，usemap屬性指定該圖像被用做圖像地圖，其設置值爲所使用的圖像熱點映射名稱，格式爲：在<map>標籤中的name屬性設置值前多加一個"#"字符。例如，<img src="china.jpg" usemap="#mymap">

示例代碼

CODE:

<img src="china.gif" usemap="#mymap">

map name="mymap">

     <area shape="rect" href="a.html" coords="0,0,50,50">

     <area shape="circle" href="b.html" coords="120,80,50">

     <area shape="poly" href="c.html" coords="0,0,50,50,100,100,200,200">

/map>

Shape屬性的設置說明：

Rect：

       定義一個矩形區域，coords屬性設置值爲左上角、右下角的座標，各個座標之間用逗號分開。

Poly：

       定義一個多邊型區域，coords屬性設置值爲多邊形各個頂點的座標值。

Circle：

       定義一個圓形區域，coords屬性設置值爲圓心座標及半徑，前兩個參數分別爲圓心的橫、縱座標，第三個參數爲半徑。

出處：http://www.nowamagic.net/html/html_MapArea.php

出處：http://hi.baidu.com/hlz8258/item/283b67f286ea490b84d278dc

出處：http://www.cnblogs.com/SkySoot/archive/2012/05/13/2498197.html

同時你也能夠參考w3school的說明：http://www.w3school.com.cn/tags/tag_map.asp