<map>:圖像映射元素

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.

<map> HTML 元素與 <area> 元素一同使用,用於定義圖像映射(可點擊的鏈接區域)。

嘗試一下

屬性

此元素包括全域屬性

name

name 屬性給映射一個名稱,以便可以引用它。該屬性必須存在,並且必須具有非空值,沒有空格字符。name 屬性的值不能等於同一文件中另一個 <map> 元素的 name 屬性的值。如果還指定了 id 屬性,則兩個屬性的值必須相同。

範例

具有兩個區域的圖像映射

單擊左邊的鸚鵡可查看 JavaScript,單擊右邊的鸚鵡可查看 CSS。

HTML

html
<!-- Photo by Juliana e Mariana Amorim on Unsplash -->
<map name="primary">
  <area
    shape="circle"
    coords="75,75,75"
    href="https://developer.mozilla.org/docs/Web/JavaScript"
    target="_blank"
    alt="JavaScript" />
  <area
    shape="circle"
    coords="275,75,75"
    href="https://developer.mozilla.org/docs/Web/CSS"
    target="_blank"
    alt="CSS" />
</map>
<img
  usemap="#primary"
  src="parrots.jpg"
  alt="350 x 150 picture of two parrots" />

結果

技術摘要

內容類別 流內容段落型內容、可感知的內容。
允許的內容 任何透明內容模型元素。
標籤省略 不允許,必須有開始標籤和結束標籤。
允許的父元素 任何接受段落型內容的元素。
隱含的 ARIA 角色 沒有對應的角色
允許的 ARIA 角色 沒有允許的 role
DOM 介面 HTMLMapElement

規範

Specification
HTML
# the-map-element

瀏覽器相容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
map
name

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

參見