<map>: 影像地圖元素

基線 廣泛可用

此功能已經成熟，並在許多裝置和瀏覽器版本中正常工作。它自 2015 年 7 月.

<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://mdn.club.tw/docs/Web/JavaScript"
    target="_blank"
    alt="JavaScript" />
  <area
    shape="circle"
    coords="275,75,75"
    href="https://mdn.club.tw/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

規範

規範
HTML 標準
# the-map-element

瀏覽器相容性

BCD 表格僅在啟用 JavaScript 的瀏覽器中載入。

另請參見