<area>: 影像地圖區域元素

基線 廣泛可用

此功能已得到很好的建立,並且可在許多裝置和瀏覽器版本上執行。它已在 2015 年 7 月的各瀏覽器中提供 2015 年 7 月.

**<area>** HTML 元素定義影像地圖內具有預定義可點選區域的區域。影像地圖 允許將影像上的幾何區域與 超文字連結 相關聯。

此元素僅在 <map> 元素內使用。

試試看

屬性

此元素的屬性包括 全域性屬性

alt

在不顯示影像的瀏覽器中顯示的文字字串替代項。文字應措辭得當,以便向用戶提供與顯示影像時相同的選項。僅當使用 href 屬性時,此屬性才為必需。

coords

coords 屬性詳細說明了 shape 屬性的座標,即 <area> 的大小、形狀和位置。如果 shape 設定為 default,則此屬性不能使用。

  • rect: 值為 x1,y1,x2,y2。該值指定矩形左上角和右下角的座標。例如,在 <area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla"> 中,座標為 0,0253,27,分別指示矩形的左上角和右下角。
  • circle: 值為 x,y,radius。該值指定圓心座標和半徑。例如:<area shape="circle" coords="130,136,60" href="#" target="_blank" alt="MDN">
  • poly: 值為 x1,y1,x2,y2,..,xn,yn。該值指定多邊形邊緣的座標。如果第一個和最後一個座標對不相同,瀏覽器將新增最後一個座標對以關閉多邊形

這些值是 CSS 畫素數。

download

如果存在此屬性,則表示作者希望將超連結用於下載資源。有關 <a>download 屬性的完整描述,請參閱。

href

區域的超連結目標。它的值為有效的 URL。此屬性可以省略;如果是這樣,則 <area> 元素不表示超連結。

ping

包含以空格分隔的 URL 列表,當跟隨超連結時,瀏覽器將在後臺傳送帶有正文 PINGPOST 請求(在後臺)。通常用於跟蹤。

referrerpolicy

一個字串,指示在獲取資源時使用哪個推薦人

  • no-referrer: 不會發送 Referer 標頭。
  • no-referrer-when-downgrade: 不會向沒有 TLS (HTTPS) 的 傳送 Referer 標頭。
  • origin: 傳送的推薦人將限制為推薦頁面的源:它的 方案主機
  • origin-when-cross-origin: 傳送到其他源的推薦人將限制為方案、主機和埠。同一源上的導航仍將包括路徑。
  • same-origin: 將為 同一源 傳送推薦人,但跨源請求將不包含任何推薦人資訊。
  • strict-origin: 僅當協議安全級別保持不變(HTTPS→HTTPS)時才將文件的源傳送為推薦人,但不要將其傳送到安全性較低的目的地(HTTPS→HTTP)。
  • strict-origin-when-cross-origin (預設): 在執行同一源請求時傳送完整的 URL,僅當協議安全級別保持不變(HTTPS→HTTPS)時才傳送源,並且不向安全性較低的目的地(HTTPS→HTTP)傳送任何標頭。
  • unsafe-url: 推薦人將包括源路徑(但不包括 片段密碼使用者名稱)。此值不安全,因為它會將源和路徑從 TLS 保護的資源洩露到不安全的源。
rel

對於包含 href 屬性的錨點,該屬性指定目標物件與連結物件之間的關係。該值是一個空格分隔的連結型別列表。這些值及其語義將由某個權威機構註冊,該機構可能對文件作者有意義。如果未指定其他關係,則預設關係為空。僅當存在 href 屬性時才使用此屬性。

形狀

關聯熱點區域的形狀。HTML 規範定義了以下值:rect,定義矩形區域;circle,定義圓形區域;poly,定義多邊形區域;default,表示除定義形狀之外的整個區域。

目標

用於顯示連結資源的 瀏覽上下文 的關鍵字或作者定義的名稱。以下關鍵字具有特殊含義

  • _self(預設):在當前瀏覽上下文中顯示資源。
  • _blank:在新的無名瀏覽上下文中顯示資源。
  • _parent:如果當前頁面位於框架內,則在當前瀏覽上下文的父瀏覽上下文中顯示資源。如果沒有父級,則與 _self 相同。
  • _top:在最頂層瀏覽上下文中顯示資源(與當前瀏覽上下文相關聯的祖先瀏覽上下文,且沒有父級)。如果沒有父級,則與 _self 相同。

僅當存在 href 屬性時才使用此屬性。

注意:<area> 元素上設定 target="_blank" 隱式提供與設定 rel="noopener" 相同的 rel 行為,後者不設定 window.opener。有關支援狀態,請參見 瀏覽器相容性

示例

html
<map name="primary">
  <area
    shape="circle"
    coords="75,75,75"
    href="left.html"
    alt="Click to go Left" />
  <area
    shape="circle"
    coords="275,75,75"
    href="right.html"
    alt="Click to go Right" />
</map>
<img
  usemap="#primary"
  src="https://dummyimage.com/350x150"
  alt="350 x 150 pic" />

結果

技術概述

內容類別 流內容短語內容
允許的內容 無;它是一個 空元素
標籤省略 必須具有開始標籤,且不能具有結束標籤。
允許的父級 任何接受 短語內容 的元素。<area> 元素必須具有祖先 <map>,但它不需要是直接父級。
隱式 ARIA 角色 href 屬性存在時為 link,否則為 generic
允許的 ARIA 角色 不允許使用 role
DOM 介面 HTMLAreaElement

規範

規範
HTML 標準
# the-area-element

瀏覽器相容性

BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。