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

<area> HTML 元素定義了圖像地圖中具有預定義可點擊區域的區域。圖像地圖允許將圖像上的幾何區域與超連結關聯。

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

嘗試一下

<map name="infographic">
 <area
 shape="poly"
 coords="129,0,260,95,129,138"
 href="https://developer.mozilla.org/docs/Web/HTTP"
 alt="HTTP" />
 <area
 shape="poly"
 coords="260,96,209,249,130,138"
 href="https://developer.mozilla.org/docs/Web/HTML"
 alt="HTML" />
 <area
 shape="poly"
 coords="209,249,49,249,130,139"
 href="https://developer.mozilla.org/docs/Web/JavaScript"
 alt="JavaScript" />
 <area
 shape="poly"
 coords="48,249,0,96,129,138"
 href="https://developer.mozilla.org/docs/Web/API"
 alt="Web APIs" />
 <area
 shape="poly"
 coords="0,95,128,0,128,137"
 href="https://developer.mozilla.org/docs/Web/CSS"
 alt="CSS" />
</map>
<img
 usemap="#infographic"
 src="/shared-assets/images/examples/mdn-info.png"
 alt="MDN infographic" />

img {
 display: block;
 margin: 0 auto;
 width: 260px;
 height: 260px;
}

屬性

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

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

如果存在此屬性,則表示作者打算使用該超連結下載資源。有關 download 屬性的詳細描述,請參見 <a>。

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" />

結果

技術摘要

規範

瀏覽器相容性