<area>標(biāo)記主要用于圖像地圖，通過該標(biāo)記可以在圖像地圖中設(shè)定作用區(qū)域（又稱為熱點），這樣當(dāng)用戶的鼠標(biāo)移到指定的作用區(qū)域點擊時，會自動鏈接到預(yù)先設(shè)定好的頁面。其基本語法結(jié)構(gòu)如下：

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

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

alt：用于設(shè)定熱點的替代性文字。

href：用于設(shè)定該熱點所鏈接的url地址。

shape和coords：是兩個主要的參數(shù)，用于設(shè)定熱點的形狀和大小。其基本用法如下：

<area shape="rect" coords="x1, y1,x2,y2" href=url>表示設(shè)定熱點的形狀為矩形，左上角頂點坐標(biāo)為（X1,y1），右下角頂點坐標(biāo)為（X2,y2）。

<area shape="circle" coords="x1, y1,r" href=url>表示設(shè)定熱點的形狀為圓形，圓心坐標(biāo)為（X1,y1），半徑為r。

<area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>表示設(shè)定熱點的形狀為多邊形，各頂點坐標(biāo)依次為（X1,y1）、（X2,y2）、（x3,y3） ......。

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

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

下面通過一個例子來說明這兩個標(biāo)記的用法：

這里是一幅新書架的圖片，要做的效果是：當(dāng)鼠標(biāo)點“網(wǎng)址大全”這本書時，新開一窗口，顯示關(guān)于這本書的簡介及訂單的網(wǎng)頁（urlall.htm）；當(dāng)鼠標(biāo)點“網(wǎng)站設(shè)計攻略”這本書時，新開一窗口，顯示關(guān)于這本書的簡介及訂單的網(wǎng)頁（siteall.htm）；當(dāng)鼠標(biāo)點“網(wǎng)頁技巧大全”這本書時，新開一窗口，顯示關(guān)于這本書的簡介及訂單的網(wǎng)頁（pagejqlall.htm）。制作方法：

1、插入圖片，并設(shè)置好圖像的有關(guān)參數(shù)，且在<img>標(biāo)記中設(shè)置參數(shù)usemap="newbook" ismap，以表示對圖像地圖（newbook）的引用；

2、用<map>標(biāo)記設(shè)定圖像地圖的作用區(qū)域，并取名為：newbook；

3、分別用<area>標(biāo)記針對三本書的位置劃分出三個矩形作用區(qū)域，并設(shè)定好其鏈接參數(shù)href。

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

在制作本文介紹的效果時應(yīng)注意的幾點：

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

2、同一“圖像地圖”中的所有熱點區(qū)域都要在圖像地圖的范圍內(nèi)，即所有<area>標(biāo)記均要在<map>與</map>之間；

3、在<area>標(biāo)記中的 cords 參數(shù)設(shè)定的坐標(biāo)格式要與shape參數(shù)設(shè)定的作用區(qū)域形狀配套，避免出現(xiàn)在shape參數(shù)設(shè)置的矩形作用區(qū)域，而在cords 中設(shè)置的卻是多邊形區(qū)域頂點坐標(biāo)的現(xiàn)象出現(xiàn)。

HTML和XHTML之間的差異

在HTML中，<area>元素不需要結(jié)束標(biāo)簽。

但XHTML中，<area>元素必須正確關(guān)閉。

必選屬性

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

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

可選屬性

屬性	值	描述	DTD
coords	坐標(biāo)	指定一個區(qū)域的坐標(biāo)	STF
href	URL	指定一個區(qū)域的鏈接目標(biāo)	STF
nohref	nohref	指出區(qū)域內(nèi)沒有相應(yīng)的鏈接	STF
shape	default rect circle poly	指定區(qū)域的形狀	STF
target	_blank _parent _self _top	指出在何處打開新頁面	TF

---

核心屬性

<area>標(biāo)簽支持以下核心屬性：

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

更多關(guān)于核心屬性的信息。

---

事件屬性

<area>標(biāo)簽支持以下事件屬性:

屬性	值	描述	DTD
onblur	腳本	當(dāng)元素失去焦點時執(zhí)行腳本	STF
onclick	腳本	在元素區(qū)域內(nèi)單擊鼠標(biāo)（不區(qū)分左右鍵）時執(zhí)行腳本	STF
ondblclick	腳本	在元素區(qū)域內(nèi)雙擊鼠標(biāo)（不區(qū)分左右鍵）時執(zhí)行腳本	STF
onfocus	腳本	當(dāng)元素取得焦點時執(zhí)行腳本	STF
onmousedown	腳本	在元素區(qū)域內(nèi)按下鼠標(biāo)鍵（不區(qū)分左右鍵）時執(zhí)行腳本	STF
onmousemove	腳本	當(dāng)鼠標(biāo)指針在元素區(qū)域內(nèi)移動時執(zhí)行腳本	STF
onmouseout	腳本	當(dāng)鼠標(biāo)指針移出元素區(qū)域時執(zhí)行腳本	STF
onmouseover	腳本	當(dāng)鼠標(biāo)指針移入元素區(qū)域時執(zhí)行腳本	STF
onmouseup	腳本	在元素區(qū)域內(nèi)松開鼠標(biāo)鍵（不區(qū)分左右鍵）時執(zhí)行腳本	STF
onkeydown	腳本	按下一個鍵時執(zhí)行腳本	STF
onkeypress	腳本	按下并松開一個鍵時執(zhí)行腳本	STF
onkeyup	腳本	松開一個鍵時執(zhí)行腳本	STF

最新評論