<區域>

HTML <area> 標籤

實例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p>点击太阳或其他行星，注意变化：</p>

<img src="https://img.php.cn/upload/article/000/000/001/5e572220870aa252.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

</body>
</html>

######################################運行實例»######點擊"運行實例" 按鈕查看線上實例######

瀏覽器支援

所有主流瀏覽器都支援 <area> 標籤。

標籤定義並使用說明

<area> 標籤定義圖像映射內部的區域（圖像映射指的是帶有可點擊區域的圖像）。

<area> 元素總是嵌套在 <map> 標籤內部。

註解： <img> 標籤中的 usemap 屬性與 <map> 元素中的 name 相關聯，以建立映像與映射之間的關係。

HTML 4.01 與 HTML5之間的差異

HTML5 提供了一些新屬性，同時不再支援 HTML 4.01 中的某些屬性。

HTML 與 XHTML 之間的差異

在 HTML 中，<area> 標籤沒有結束標籤。

在 XHTML 中，<area> 標籤必須正確地關閉。

屬性

New ：HTML5 中的新屬性。

屬性	值	描述
alt	#text	規定區域的替代文字。如果使用 href 屬性，則該屬性是必需的。
coords	coordinates	規定區域的座標。
href	URL	#規定區域的目標 URL。
hreflangNew	#language_code	規定目標 URL 的語言。
mediaNew	media query	規定目標URL 為何種媒介/裝置最佳化的。預設：all。
nohref	value	#HTML5 不支援。規定沒有相關連結的區域。
relNew	alternate author bookmark help license next nofollow noreferrer prefetch prev search tag	規定目前文件與目標 URL 之間的關係。
shape	default # rect circle poly	規定區域的形狀。
target	_blank _parent _self # _top framename	規定在何處開啟目標 URL。
typeNew	MIME_type	規定目標 URL 的 MIME 類型。附註：MIME = Multipurpose Internet Mail Extensions。

全域屬性

<area> 標籤支援 HTML 的全域屬性。

事件屬性

<area> 標籤支援 HTML 的事件屬性。

HTML DOM 參考手冊： Area 物件