在图像上方添加热点图

图片映射及其缺点

当你将图片嵌套在 <a> 标签内时，整个图片会链接到一个网页。而图片映射则包含多个活动区域（称为“热区”），每个热区都链接到不同的资源。

以前，图片映射是一种流行的导航设备，但仔细考虑其性能和可访问性影响非常重要。

文本链接（可能通过 CSS 样式化）优于图片映射有几个原因：文本链接轻量、易于维护、通常对 SEO 更友好，并支持可访问性需求（例如，屏幕阅读器、纯文本浏览器、翻译服务）。

如何正确插入图片映射

步骤 1：图片

并非任何图片都适用。

• 图片必须清楚地说明当人们点击图片链接时会发生什么。alt 文本是强制性的，但很多人从不看它。
• 图片必须清楚地标示热区的起始和结束位置。
• 热区必须足够大，以便在任何视口尺寸下都能舒适地点击。多大才算足够大？72 × 72 CSS 像素是一个不错的最小值，并且触控目标之间留有额外的宽裕间距。50languages.com 上的世界地图（截至撰写时）完美地说明了这个问题。点击俄罗斯或北美比点击阿尔巴尼亚或爱沙尼亚要容易得多。

你插入图片的方式 与往常大致相同（使用 <img> 元素和 alt 文本）。如果图片仅作为导航设备存在，你可以编写 alt=""，前提是你在 <area> 元素中提供了适当的 alt 文本。

你需要一个特殊的 usemap 属性。为你的图片映射想一个不含空格的唯一名称。然后将该名称（前面带一个井号）作为 usemap 属性的值。

<img src="image-map.png" alt="" usemap="#example-map-1" />

步骤 2：激活热区

在此步骤中，将所有代码放在 <map> 元素中。<map> 只需要一个属性，即与你上面 usemap 属性中使用的地图 name 相同的名称。

<map name="example-map-1"> </map>

在 <map> 元素内部，我们需要 <area> 元素。一个 <area> 元素对应一个热区。为了保持键盘导航的直观性，请确保 <area> 元素的源顺序与热区的视觉顺序一致。

<area> 元素是 空元素，但需要四个属性

shape

shape 属性有四个值：circle、rect、poly 和 default。一个 shape 为 default 的 <area> 会占据整个图片，减去你定义的任何其他热区。如果定义的区域之间有任何重叠，则源顺序决定哪个区域优先。你选择的形状决定了你需要在 coords 中提供的坐标信息。

coords

坐标以 CSS 像素给出，其值取决于所选的 shape。

• 对于圆形，提供中心的 x 和 y 坐标，后跟半径的长度。
• 对于矩形，提供左上角和右下角的 x 和 y 坐标。
• 对于多边形，提供每个角的 x 和 y 坐标（因此，至少六个值）。

href

你链接到的资源的 URL。如果你不希望当前区域链接到任何地方（例如，如果你正在制作一个空心圆），你可以将此属性留空。

alt

一个强制属性，告诉人们链接指向哪里或做什么。alt 文本仅在图片不可用时显示。请参阅我们的 编写可访问链接文本的指南。

如果 href 属性为空并且整个图片已经有一个 alt 属性，你可以编写 alt=""。

<map name="example-map-1">
  <area
    shape="circle"
    coords="200,250,25"
    href="page-2.html"
    alt="circle example" />

  <area
    shape="rect"
    coords="10, 5, 20, 15"
    href="page-3.html"
    alt="rectangle example" />
</map>

步骤 3：确保它对每个人都有效

在许多浏览器和设备上严格测试图片映射之前，你还没有完成。尝试仅使用键盘来点击链接。尝试关闭图片。

如果你的图片映射宽度超过约 240 像素，你需要进行进一步调整以使你的网站具有响应性。仅仅为小屏幕调整图片大小是不够的，因为坐标保持不变并且不再与图片匹配。

了解更多

• <img>
• <map>
• <area>
• 在线图片映射编辑器