HTML <area> 標簽

定義和用法

<area> 標簽定義圖像映射內的區域（圖像映射是帶有可點擊區域的圖像，也就是客戶端的分區響應圖）。

<area> 元素始終嵌套在 <map> 標簽內。

注意：<img> 中的 usemap 屬性 與 <map> 元素 的 name 屬性相關聯，創建圖像與映射之間的關聯。

另請參閱：

HTML DOM 參考手冊：Area 對象

實例

例子 1

帶有可點擊區域的圖像映射：

<img src="life.png" alt="Life" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="AirPods" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="iPhone" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Coffee" href="coffee.html">
</map>

親自試一試

例子 2

另一個帶有可點擊區域的圖像映射：

<img src="solarsystem.png" width="1024" height="576" alt="Planets" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,114,576" alt="Sun" href="sun.html">
  <area shape="circle" coords="190,230,5" alt="Mercury" href="mercury.html">
  <area shape="circle" coords="228,230,5" alt="Venus" href="venus.html">
</map>

親自試一試

屬性

屬性 值 描述
alt 文本 規定區域的替代文本。如果存在 href 屬性則為必需。
coords 坐標值 規定區域的坐標。
download 文件名 規定當用戶單擊超鏈接時將下載目標。
href URL 規定區域的超鏈接目標。
hreflang 語言代碼 規定目標 URL 的語言。
media 媒體查詢 規定目標 URL 優化的媒體/設備。
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
 規定要與鏈接一起發送的引用信息。
rel
  • alternate
  • author
  • bookmark
  • help
  • license
  • next
  • nofollow
  • noreferrer
  • prefetch
  • prev
  • search
  • tag
 規定當前文檔和目標 URL 之間的關系。
shape
  • default
  • rect
  • circle
  • poly
 規定區域的形狀。
target
  • _blank
  • _parent
  • _self
  • _top
  • 框架名稱
 規定在何處打開目標 URL。
type 媒體類型 規定目標 URL 的媒體類型。

全局屬性

<area> 標簽還支持 HTML 中的全局屬性。

事件屬性

<area> 標簽還支持 HTML 中的事件屬性。

默認的 CSS 設置

大多數瀏覽器將使用以下默認值顯示 <area> 元素：

area {
  display: none;
}

瀏覽器支持

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
支持 支持 支持 支持 支持