在图像上添加热点图

当你在 <a> 内部嵌套图像时，整个图像链接到一个网页。另一方面，图像地图包含多个活动区域（称为“热点”），每个区域链接到不同的资源。

以前，图像地图是一种流行的导航工具，但重要的是要彻底考虑它们的性能和无障碍性影响。

文本链接（可能用 CSS 样式化）比图像地图更可取，原因有几个：文本链接更轻量级、更易于维护、通常更利于 SEO，并支持无障碍性需求（例如，屏幕阅读器、纯文本浏览器、翻译服务）。

并非任何图像都可接受。

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

你像往常一样插入你的图像 几乎一样（使用 <img> 元素和 alt 文本）。如果图像仅作为导航工具存在，你可以在 <area> 元素中提供适当的 alt 文本的情况下，写 alt=""。

你需要一个特殊的 usemap 属性。想出一个不包含空格的唯一名称，用于你的图像地图。然后将该名称（前面加一个井号）分配为 usemap 属性的值

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

在此步骤中，将所有代码放在 <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>

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

如果你的图像地图宽度超过大约 240px，则你需要进行进一步调整以使你的网站响应式。仅仅调整小屏幕的图像大小是不够的，因为坐标保持不变，不再与图像匹配。

• <img>
• <map>
• <area>
• 在线图像地图编辑器