<area>: 影像地圖區域元素
試試看
屬性
此元素的屬性包括 全域性屬性。
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 畫素數。
-
downloadhref-
區域的超連結目標。它的值為有效的 URL。此屬性可以省略;如果是這樣,則
<area>元素不表示超連結。 ping-
包含以空格分隔的 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屬性時才使用此屬性。 形狀-
關聯熱點區域的形狀。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" />
結果
技術概述
規範
| 規範 |
|---|
| HTML 標準 # the-area-element |
瀏覽器相容性
BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。