<map>:图片映射元素

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

¥The <map> HTML element is used with <area> elements to define an image map (a clickable link area).

Try it

属性

¥Attributes

该元素包括全局属性。

¥This element includes the global attributes.

name: name 属性为地图提供一个名称，以便可以引用它。该属性必须存在，并且必须具有不带空格字符的非空值。name 属性的值不得等于同一文档中另一个 <map> 元素的 name 属性的值。如果还指定了 id 属性，则两个属性必须具有相同的值。

示例

¥Examples

具有两个区域的图片映射

¥Image map with two areas

对于 JavaScript，单击左侧鹦鹉，对于 CSS，单击右侧鹦鹉。

¥Click the left-hand parrot for JavaScript, or the right-hand parrot for CSS.

HTML

html

<!-- Photo by Juliana e Mariana Amorim on Unsplash -->
<map name="primary">
  <area
    shape="circle"
    coords="75,75,75"
    href="https://web.nodejs.cn/docs/Web/JavaScript"
    target="_blank"
    alt="JavaScript" />
  <area
    shape="circle"
    coords="275,75,75"
    href="https://web.nodejs.cn/docs/Web/CSS"
    target="_blank"
    alt="CSS" />
</map>
<img
  usemap="#primary"
  src="parrots.jpg"
  alt="350 x 150 picture of two parrots" />

结果

¥Result

技术总结

¥Technical summary

内容类别	流量内容，措辞内容，可触及的内容。
允许的内容	任何 transparent 元素。
标签遗漏	无，开始和结束标记都是强制性的。
允许的父级	任何接受措辞内容的元素。
隐式 ARIA 角色	没有对应的角色
允许的 ARIA 角色	不允许 `role`
DOM 接口	`HTMLMapElement`

规范

Specification
HTML Standard # the-map-element

¥Specifications

浏览器兼容性

BCD tables only load in the browser

¥Browser compatibility

也可以看看

¥See also