<area>：图像映射区域元素

试一试

<map name="infographic">
  <area
    shape="poly"
    coords="129,0,260,95,129,138"
    href="https://mdn.org.cn/docs/Web/HTTP"
    alt="HTTP" />
  <area
    shape="poly"
    coords="260,96,209,249,130,138"
    href="https://mdn.org.cn/docs/Web/HTML"
    alt="HTML" />
  <area
    shape="poly"
    coords="209,249,49,249,130,139"
    href="https://mdn.org.cn/docs/Web/JavaScript"
    alt="JavaScript" />
  <area
    shape="poly"
    coords="48,249,0,96,129,138"
    href="https://mdn.org.cn/docs/Web/API"
    alt="Web APIs" />
  <area
    shape="poly"
    coords="0,95,128,0,128,137"
    href="https://mdn.org.cn/docs/Web/CSS"
    alt="CSS" />
</map>
<img
  usemap="#infographic"
  src="/shared-assets/images/examples/mdn-info.png"
  alt="MDN infographic" />

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

属性

此元素的属性包括全局属性。

alt

在不显示图像的浏览器上显示替代文本字符串。文本的措辞应使用户能够像图像在没有替代文本的情况下显示时一样进行选择。此属性仅在使用了href属性时才需要。

coords

coords属性详细说明了shape属性在<area>的大小、形状和位置方面的坐标。如果shape设置为default，则不得使用此属性。

• rect：值为x1,y1,x2,y2。该值指定矩形左上角和右下角的坐标。例如，在<area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Mozilla">中，坐标是0,0和253,27，分别表示矩形的左上角和右下角。
• circle：值为x,y,radius。该值指定圆心坐标和半径。例如：<area shape="circle" coords="130,136,60" href="#" target="_blank" alt="MDN">
• poly：值为x1,y1,x2,y2,..,xn,yn。该值指定多边形边的坐标。如果第一个和最后一个坐标对不相同，浏览器将添加最后一个坐标对以闭合多边形。

这些值是CSS像素数。我们的形状生成器可以通过选择您上传的图像上的点来帮助您生成coords语法。

download

此属性（如果存在）表示链接资源旨在下载而不是在浏览器中显示。有关download属性的完整说明，请参阅<a>。

href

该区域的超链接目标。其值是有效的URL。此属性可以省略；如果省略，则<area>元素不表示超链接。

ping

包含一个以空格分隔的URL列表，当超链接被点击时，浏览器将（在后台）向这些URL发送正文为PING的POST请求。通常用于跟踪。

referrerpolicy

一个字符串，指示在获取资源时要使用的引用者

• no-referrer：将不发送 Referer 头。
• no-referrer-when-downgrade：将不向没有 TLS (HTTPS) 的源发送 Referer 头。
• origin：发送的引用者将仅限于引用页面的源：其方案、主机和端口。
• origin-when-cross-origin：发送到其他源的引用者将仅限于方案、主机和端口。同一源上的导航仍将包含路径。
• same-origin：将为同源发送引用者，但跨域请求将不包含引用者信息。
• strict-origin：仅当协议安全级别保持不变 (HTTPS→HTTPS) 时，才将文档的源作为引用者发送，但不要将其发送到安全性较低的目标 (HTTPS→HTTP)。
• strict-origin-when-cross-origin（默认）：执行同源请求时发送完整 URL，仅当协议安全级别保持不变 (HTTPS→HTTPS) 时发送源，不向安全性较低的目标 (HTTPS→HTTP) 发送任何头。
• unsafe-url：引用者将包含源和路径（但不包含片段、密码或用户名）。此值不安全，因为它会将 TLS 保护资源的源和路径泄漏到不安全的源。

rel

对于包含href属性的锚点，此属性指定目标对象与链接对象的关系。该值是一个以空格分隔的链接类型列表。这些值及其语义将由可能对文档作者有意义的某些机构注册。如果未给出其他关系，则默认关系为空。仅当href属性存在时才使用此属性。

shape

关联热点的形状。HTML规范定义了值rect（定义矩形区域）、circle（定义圆形区域）、poly（定义多边形）和default（表示超出任何已定义形状的整个区域）。

目标

用于显示链接资源的浏览上下文的关键字或作者定义名称。以下关键字具有特殊含义：

• _self（默认）：在当前浏览上下文中显示资源。
• _blank：在新的、未命名的浏览上下文中显示资源。
• _parent：如果当前页面位于框架内，则在当前页面的父浏览上下文中显示资源。如果没有父级，则行为与_self相同。
• _top：在最顶层的浏览上下文（作为当前浏览上下文的祖先且没有父级的浏览上下文）中显示资源。如果没有父级，则行为与_self相同。

仅当href属性存在时才使用此属性。

注意：在<area>元素上设置target="_blank"隐式提供与设置rel="noopener"相同的rel行为，后者不设置window.opener。有关支持状态，请参阅浏览器兼容性。

示例

具有可点击区域的图像

<map name="primary">
  <area
    shape="circle"
    coords="75,75,75"
    href="left.html"
    alt="Click to go Left" />
  <area
    shape="circle"
    coords="275,75,75"
    href="right.html"
    alt="Click to go Right" />
</map>
<img
  usemap="#primary"
  src="https://dummyimage.com/350x150"
  alt="350 x 150 pic" />

技术摘要

规范

浏览器兼容性