<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.org.cn/docs/Web/JavaScript"
    target="_blank"
    alt="JavaScript" />
  <area
    shape="circle"
    coords="275,75,75"
    href="https://mdn.org.cn/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 的浏览器中加载。

另请参见