<area>：影像對映區域元素

試一試

<map name="infographic">
  <area
    shape="poly"
    coords="129,0,260,95,129,138"
    href="https://mdn.club.tw/docs/Web/HTTP"
    alt="HTTP" />
  <area
    shape="poly"
    coords="260,96,209,249,130,138"
    href="https://mdn.club.tw/docs/Web/HTML"
    alt="HTML" />
  <area
    shape="poly"
    coords="209,249,49,249,130,139"
    href="https://mdn.club.tw/docs/Web/JavaScript"
    alt="JavaScript" />
  <area
    shape="poly"
    coords="48,249,0,96,129,138"
    href="https://mdn.club.tw/docs/Web/API"
    alt="Web APIs" />
  <area
    shape="poly"
    coords="0,95,128,0,128,137"
    href="https://mdn.club.tw/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屬性詳細說明了shape屬性在<area>的大小、形狀和位置方面的座標。如果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畫素數。我們的形狀生成器可以透過選擇您上傳的影像上的點來幫助您生成coords語法。

download

此屬性（如果存在）表示連結資源旨在下載而不是在瀏覽器中顯示。有關download屬性的完整說明，請參閱<a>。

href

該區域的超連結目標。其值是有效的URL。此屬性可以省略；如果省略，則<area>元素不表示超連結。

ping

包含一個以空格分隔的URL列表，當超連結被點選時，瀏覽器將（在後臺）向這些URL傳送正文為PING的POST請求。通常用於跟蹤。

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屬性存在時才使用此屬性。

shape

關聯熱點的形狀。HTML規範定義了值rect（定義矩形區域）、circle（定義圓形區域）、poly（定義多邊形）和default（表示超出任何已定義形狀的整個區域）。

目標

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

• _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://dummyimage.com/350x150"
  alt="350 x 150 pic" />

技術摘要

規範

瀏覽器相容性