在图片顶部添加命中图

¥Image maps, and their drawbacks

当你将图片嵌套在 <a> 中时，整个图片会链接到一个网页。另一方面，图片映射包含多个活动区域（称为 "hotspots"），每个区域链接到不同的资源。

¥When you nest an image inside <a>, the entire image links to one webpage. An image map, on the other hand, contains several active regions (called "hotspots") that each link to a different resource.

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

¥Formerly, image maps were a popular navigation device, but it's important to thoroughly consider their performance and accessibility ramifications.

文字链接（可能使用 CSS 样式）比图片映射更可取，原因如下：文本链接是轻量级的、可维护的，通常对 SEO 更友好，并且支持可访问性需求（例如，屏幕阅读器、纯文本浏览器、翻译服务）。

¥Text links (perhaps styled with CSS) are preferable to image maps for several reasons: text links are lightweight, maintainable, often more SEO-friendly, and support accessibility needs (e.g., screen readers, text-only browsers, translation services).

¥How to insert an image map, properly

¥Step 1: The image

并非任何图片都是可以接受的。

¥Not just any image is acceptable.

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

你插入图片 和往常一样（带有 <img> 元素和 alt 文本）。如果图片仅作为导航设备出现，你可以编写 alt=""，前提是你稍后在 <area> 元素中提供适当的 alt 文本。

¥You insert your image much the same way as always (with an <img> element and alt text). If the image is only present as a navigation device, you may write alt="", provided you furnish appropriate alt text in the <area> elements later on.

你将需要一个特殊的 usemap 属性。为你的图片地图起一个不包含空格的唯一名称。然后将该名称（前面带有哈希值）指定为 usemap 属性的值：

¥You will need a special usemap attribute. Come up with a unique name, containing no spaces, for your image map. Then assign that name (preceded by a hash) as the value for the usemap attribute:

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

¥Step 2: Activate your hotspots

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

¥In this step, put all your code inside a <map> element. <map> only needs one attribute, the same map name as you used in your usemap attribute above:

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

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

¥Inside the <map> element, we need <area> elements. An <area> element corresponds to a single hotspot. To keep keyboard navigation intuitive, make sure the source order of <area> elements corresponds to the visual order of hotspots.

<area> 元素是 void elements，但确实需要四个属性：

¥<area> elements are void elements, but do require four attributes:

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>

¥Step 3: Make sure it works for everybody

直到你在许多浏览器和设备上严格测试图片映射后，你才完成。尝试仅使用键盘点击链接。尝试关闭图片。

¥You aren't done until you test image maps rigorously on many browsers and devices. Try following links with your keyboard alone. Try turning images off.

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

¥If your image map is wider than about 240px, you'll need to make further adjustments to make your website responsive. It's not enough to resize the image for small screens, because the coordinates stay the same and no longer match the image.

¥Learn more

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