<area>:圖像地圖區域元素
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
嘗試一下
屬性
此元素的屬性包括全域屬性。
alt
-
在不顯示圖像的瀏覽器上顯示的文本字符串替代品。文本應該構造成當不顯示替代文本時向用戶呈現與圖像相同類型的選擇。只有在使用
href
屬性時才需要此屬性。 coords
-
coords
屬性詳細描述了<area>
的shape
屬性的大小、形狀和位置的坐標。如果shape
設置為default
,則不能使用此屬性。rect
:值為x1,y1,x2,y2
。該值指定了矩形的左上角和右下角的坐標。例如,在<area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla">
中,坐標為0,0
和253,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
href
-
區域的超連結目標。它的值是有效的 URL。如果省略此屬性,則
<area>
元素不表示超連結。 ping
-
包含一個以空格分隔的 URL 列表,當點擊超連結時,瀏覽器(後台)將發送帶有
PING
主體的POST
請求到這些 URL。通常用於跟蹤。 referrerpolicy
-
指示在提取資源時使用哪個引用網址的字符串:
no-referrer
:不會發送Referer
標頭。no-referrer-when-downgrade
:不會將Referer
標頭發送給沒有 TLS(HTTPS)的 origin。origin
:發送的引用網址將被限制為引用頁面的原始位置:其 scheme、host 和 port。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
屬性存在時才使用此屬性。 shape
-
關聯熱點的形狀。 HTML 的規範定義了
rect
,它定義了矩形區域;circle
,它定義了圓形區域;poly
,它定義了多邊形;以及default
,它表示任何已定義形狀之外的整個區域。 target
-
用於顯示鏈接資源的關鍵字或作者定義的 瀏覽上下文 名稱。以下關鍵字具有特殊含義:
_self
(默認):在當前的瀏覽上下文中顯示資源。_blank
:在新的未命名的瀏覽上下文中顯示資源。_parent
:在當前頁面位於框架內時,在當前瀏覽上下文的父瀏覽上下文中顯示資源。如果沒有父親,則與_self
作用相同。_top
:在最上層的瀏覽上下文中顯示資源(即當前瀏覽上下文的祖先且沒有父親)。如果沒有父親,則與_self
作用相同。
只有在
href
屬性存在時才使用此屬性。备注: 在
<area>
元素上設置target="_blank"
將隱式提供與設置rel="noopener"
相同的rel
行為,該行為不設置window.opener
。有關支援狀態,請參見瀏覽器相容性。
範例
<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://via.placeholder.com/350x150"
alt="350 x 150 pic" />
結果
技術摘要
規範
Specification |
---|
HTML Standard # the-area-element |
瀏覽器相容性
BCD tables only load in the browser