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

{{InteractiveExample("HTML Demo: <map>", "tabbed-standard")}}

```html interactive-example HTML CSS JavaScript MDN infographic


```css interactive-example
img {
  display: block;
  margin: 0 auto;
  width: 260px;
  height: 232px;
}

属性

这个元素包含全局属性。

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

示例

含有两个区域的图像映射

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

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" />

结果

{{ EmbedLiveSample('含有两个区域的图像映射', '', '250') }}

技术概要

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