这篇翻译不完整。请帮忙从英语翻译这篇文章

现在我们将学习如何设置图像映射,先讨论他的缺点。

前提: 你应该已经知道如何create a basic HTML document 以及add accessible images to a webpage.
目标: 学习如何将一张图片的不同区域链接到不同页面。

本文仅讨论客户端图像映射。不要使用服务器端图像映射,这需要用户拥有鼠标。

图像映射和它的缺点

当你在<a>标签中嵌套图像, 整个图像是链接到一个网页的。但在图像映射中,包含多个活动区域(称为“热点”),可以链接到不同的资源地址。

图像映射原本非常流行于导航策略,但是前提需要考虑它的性能和可访问性。

Text links (perhaps styled with CSS) 比图像映射更具优势:文本链接更轻量级、好维护、更易于SEO,而且支持更多形式需求的访问(如,屏幕阅读器、纯文本浏览器、翻译服务等)。

如何正确的插入一张图像映射

步骤1: 图片

不是所有图片都合适。

  • 图片必须明确表明当用户跟随图片链接时会发生什么。 alt 属性是必须的,  但很多人注意不到。
  • 图片必须明确指出热点的开始和结束位置。
  • 在任何尺寸的视口下,热点都需要足够大,方便用户可以点击。多大足够呢?72 × 72 CSS pixels 是一个推荐的最小尺寸,  包括触摸目标之间额外的间隙。在 50languages.com (as of time of writing) 上的世界地图可以完美诠释这一点。 用户点击Russia 或 North America 要比 Albania 或 Estonia容易得多。

插入图片的方式 和通常一样 (用 <img> 标签  和 alt 文本). 如果图片只是用作导航容器, 你可以设置图片的 alt="", 改在后面<area>alt 中提供合适的文本。

你将需要一个特殊的 usemap 属性。 为图像映射提供一个唯一标识,这个标识不能包含空格。将这个标识 (preceded by a hash) 作为 usemap 属性的值:

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

步骤2: 激活你的热点

在这一步中, 将所有代码放置 <map> 标签中. <map> 只需要一个属性,  设置name 和上面usemap属性一样的map值:

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

</map>

在<map> 元素中,我们需要嵌套 <area> 元素。一个 <area> 元素对应一个热点.。为保持键盘导航的直观, 请确保<area> 的源顺序和视觉上的热点顺序一致。

<area> 元素是空元素, 但是需要包含4个属性:

shape
coords

shape 有4个值: circle, rect, poly, and default. ( default <area> 表示除去您定义的其他热点的剩余空间.)  根据你选择的形状需要在 coords 中提供对应的坐标信息。

  • 对于circle, 提供中心的x、y坐标,还需要提供半径。
  • 对于rectangle,  提供左上角和右下角的x、y坐标。
  • 对于polygon, 提供每个角的x、y坐标(至少6个值)。

坐标用CSS像素px表示。

In case of overlap, source order carries the day.

href
您需要链接的资源地址。 如果您不希望当前区域链接到任何地方(比方说,如果您正在创建一个空心圆),您可以将这个属性保留为空。
alt
一个必选属性,告诉用户链接的指向或功能说明。alt 文本仅在图像不可用时显示。请参阅我们的guidelines for writing accessible link text

如果  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: 确保它的可用范围

你还并没有完成除非你很严格的在多个浏览器和终端测试图像映射功能。尝试仅用键盘操作。尝试关掉图片。

如果你的图像映射宽度大于240px,你将需要进一步调整来适应网站的响应式。仅调整小屏幕下的图片是不够的,因为不变的坐标无法适应这样的图像。

如果必须使用图像映射, 您可以看看Matt Stow's jQuery plugin.。另外, Dudley Storey 示范了一种方法 use SVG for an image map effect,以及后来的ombined SVG-raster hack for bitmap images.

Learn more

文档标签和贡献者

 此页面的贡献者: hebby
 最后编辑者: hebby,