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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
map
name

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

参见