DIV CSS 佈局教程網

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

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

class和id：是分別指定熱點的類型和id號。

alt：用於設定熱點的替代性文字。

href：用於設定該熱點所鏈接的url地址。

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） ......。

備注：x1, y1,x2,y2　這幾個點的位置 是根據圖片而定的，不是根據窗口的大小而定。　

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

下面通過一個例子來說明這兩個標記的用法：

這裡是一幅新書架的圖片，要做的效果是：當鼠標點“網址大全”這本書時，新開一窗口，顯示關於這本書的簡介及訂單的網頁（urlall.htm）；當鼠標點“網站設計攻略”這本書時，新開一窗口，顯示關於這本書的簡介及訂單的網頁（siteall.htm）；當鼠標點“網頁技巧大全”這本書時，新開一窗口，顯示關於這本書的簡介及訂單的網頁（pagejqlall.htm）。制作方法：

1、插入圖片，並設置好圖像的有關參數，且在<img>標記中設置參數usemap="newbook" ismap，以表示對圖像地圖（newbook）的引用；

2、用<map>標記設定圖像地圖的作用區域，並取名為：newbook；

3、分別用<area>標記針對三本書的位置劃分出三個矩形作用區域，並設定好其鏈接參數href。

制作完成，本例的源代碼如下：

復制代碼代碼如下:
<img src="http://www.webjx.com/images/logo.gif" width="207" height="148" alt="新書架" hspace="10" align="left" usemap="#newbook" border="0">
<map name="newbook">
<area shape="rect" coords="56,69,78,139" href="urlall.htm" target="_blank" alt="這裡收集十萬多個網址。" title="這裡收集十萬多個網址。">
<area shape="rect" coords="82,70,103,136" href="siteall.htm" target="_blank" alt="網站設計師的啟蒙讀本。" title="網站設計師的啟蒙讀本。">
<area shape="rect" coords="106,68,128,136" href="pageall.htm" target="_blank" alt="網頁制作者不可不讀的書。" title="網頁制作者不可不讀的書。">
</map>

在制作本文介紹的效果時應注意的幾點：

1、在<img>標記不要忘記設置usemap、ismap參數，且usemap的參數值必須與<map>標記中的name參數值相同，也就是說，“圖像地圖名稱”要一致；

2、同一“圖像地圖”中的所有熱點區域都要在圖像地圖的范圍內，即所有<area>標記均要在<map>與</map>之間；

3、在<area>標記中的 cords 參數設定的坐標格式要與shape參數設定的作用區域形狀配套，避免出現在shape參數設置的矩形作用區域，而在cords 中設置的卻是多邊形區域頂點坐標的現象出現。

HTML和XHTML之間的差異

在HTML中，<area>元素不需要結束標簽。

但XHTML中，<area>元素必須正確關閉。

必選屬性

DTD欄表明哪種文檔類型支持此屬性。S=Strict，T=Transitional，F=Frameset。

屬性 值 描述 DTD alt 文本 為一個區域指定備選文本 STF

可選屬性

屬性 值 描述 DTD coords 坐標 指定一個區域的坐標 STF href URL 指定一個區域的鏈接目標 STF nohref nohref 指出區域內沒有相應的鏈接 STF shape default
rect
circle
poly 指定區域的形狀 STF target _blank
_parent
_self
_top 指出在何處打開新頁面 TF

---

核心屬性

<area>標簽支持以下核心屬性：

屬性 值 描述 DTD accesskey 字符 設置訪問元素的鍵盤快捷鍵 STF class 類名 指明元素的類名 STF dir rtl
ltr 指定元素裡內容的文本方向 STF id id 指明元素的唯一id STF lang 語言代碼 指定元素內容的語言代碼 STF style 樣式定義 指定元素的內嵌樣式 STF tabindex 數字 指定元素的Tab鍵順序 STF title 文本 指定元素的提示文本 STF xml:lang 語言代碼 在XHTML文檔中指定元素內容的語言代碼 STF

更多關於核心屬性的信息。

---

事件屬性

<area>標簽支持以下事件屬性:

屬性 值 描述 DTD onblur 腳本 當元素失去焦點時執行腳本 STF onclick 腳本 在元素區域內單擊鼠標（不區分左右鍵）時執行腳本 STF ondblclick 腳本 在元素區域內雙擊鼠標（不區分左右鍵）時執行腳本 STF onfocus 腳本 當元素取得焦點時執行腳本 STF onmousedown 腳本 在元素區域內按下鼠標鍵（不區分左右鍵）時執行腳本 STF onmousemove 腳本 當鼠標指針在元素區域內移動時執行腳本 STF onmouseout 腳本 當鼠標指針移出元素區域時執行腳本 STF onmouseover 腳本 當鼠標指針移入元素區域時執行腳本 STF onmouseup 腳本 在元素區域內松開鼠標鍵（不區分左右鍵）時執行腳本 STF onkeydown 腳本 按下一個鍵時執行腳本 STF onkeypress 腳本 按下並松開一個鍵時執行腳本 STF onkeyup 腳本 松開一個鍵時執行腳本 STF