<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.

HTML <map> 元素与 <area> 元素一起使用来定义一个图像映射（一个可点击的链接区域）。

尝试一下

属性

这个元素包含全局属性。

name

name 属性给予该映射引用的名称，这个属性必须存在，值不得为空并且不能带空格。name 属性的值不得与同文档中其他 <map> 元素的该属性值相同，如果还指定了 id 属性，则两个属性的值必须相同。

示例

含有两个区域的图像映射

单击左侧的鹦鹉访问 JavaScript 页面，单击右侧的鹦鹉访问 CSS 页面。

HTML

html
<!-- 图片由 Unsplash 上的 Juliana e Mariana Amorim 创作  -->
<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" />

结果

技术概要

内容类别 流式内容、短语内容、可感知内容。
允许的内容 任何透明元素。
标签省略 不允许，开始标签和结束标签都不能省略。
允许的父元素 任何接受短语内容的元素。
隐式 ARIA 角色 没有相应的角色
允许的 ARIA 角色 没有允许的 role
DOM 接口 HTMLMapElement

规范

Specification
HTML Standard
# the-map-element

浏览器兼容性

BCD tables only load in the browser

参见