<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> 元素一起使用来定义一个图像映射（一个可点击的链接区域）。

尝试一下

<map name="infographic">
  <area
    shape="poly"
    coords="130,147,200,107,254,219,130,228"
    href="https://developer.mozilla.org/docs/Web/HTML"
    alt="HTML" />
  <area
    shape="poly"
    coords="130,147,130,228,6,219,59,107"
    href="https://developer.mozilla.org/docs/Web/CSS"
    alt="CSS" />
  <area
    shape="poly"
    coords="130,147,200,107,130,4,59,107"
    href="https://developer.mozilla.org/docs/Web/JavaScript"
    alt="JavaScript" />
</map>
<img
  usemap="#infographic"
  src="/shared-assets/images/examples/mdn-info2.png"
  alt="MDN infographic" />

img {
  display: block;
  margin: 0 auto;
  width: 260px;
  height: 232px;
}

属性

这个元素包含全局属性。

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 # the-map-element