<area>:图片映射区域元素

¥Attributes

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

¥This element's attributes include the global attributes.

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 像素数。

download

该属性（如果存在）表明作者打算使用超链接来下载资源。有关 download 属性的完整说明，请参阅 <a>。

href

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

ping

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

referrerpolicy

指示获取资源时使用哪个引用者的字符串：

• no-referrer：Referer 标头将不会被发送。
• no-referrer-when-downgrade：如果没有 TLS (HTTPS)，Referer 标头将不会发送到 origin。
• origin：发送的引荐来源网址将仅限于引荐页面的来源：它是 scheme、host 和 port。
• origin-when-cross-origin：发送到其他来源的引用将受到方案、主机和端口的限制。同一原点的导航仍将包含该路径。
• same-origin：将发送 same origin 的引荐来源网址，但跨源请求将不包含引荐来源网址信息。
• strict-origin：仅当协议安全级别保持不变 (HTTPS→HTTPS) 时才将文档的来源作为引用站点发送，但不要将其发送到安全性较低的目的地 (HTTPS→HTTP)。
• strict-origin-when-cross-origin（默认）：执行同源请求时发送完整 URL，仅在协议安全级别保持相同时发送源（HTTPS→HTTPS），并且不向安全性较低的目的地发送标头（HTTPS→HTTP）。
• unsafe-url：引荐来源网址将包括来源和路径（但不包括 fragment、password 或 username）。此值不安全，因为它会将受 TLS 保护的资源的来源和路径泄漏到不安全的来源。

rel

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

shape

相关热点的形状。HTML 规范定义了值 rect，它定义了一个矩形区域；circle，定义圆形区域；poly，定义一个多边形；default，表示超出任何定义形状的整个区域。

target

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

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

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

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

¥Note: Setting target="_blank" on <area> elements implicitly provides the same rel behavior as setting rel="noopener" which does not set window.opener. See browser compatibility for support status.

¥Examples

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

¥Result

¥Technical summary