<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