HTML 標籤(圖片對映、熱點)的使用

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 座標。
coords 屬性與 shape 屬性配合使用，來規定區域的尺寸、形狀和位置。
影象左上角的座標是 "0,0"。
詳細解釋：
<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 標籤。瀏覽器會忽略超過影象邊界範圍之外的座標。
語法：
<area coords="value">