关于图像映射的一般问题答案

【问题标题】：General Questions About Image Maps关于图像映射的一般问题
【发布时间】：2010-08-31 21:25:15
【问题描述】：

首先，我注意到您可以将<map> 标记放在文档中的任何位置，图像映射就可以正常工作。那么，人们将<map> 标签放在<head> 中是常见的做法，还是将它放在<body> 中紧跟在它对应的<img /> 之后？

其次，我知道地图标签从 HTML5 开始并没有被弃用，并且使用选项卡您可以跳过客户端图像地图中的每个链接。尽管如此，我还是听到很多关于图像地图过时且无法访问的信息。这是真的吗？

最后，我总是听到人们说使用 CSS 或 JavaScript 实现图像映射有更好、更易于使用的方法，但我从未见过示例。有人可以向我展示或链接到跨浏览器兼容的示例（即在 IE 中工作）。

【问题讨论】：

【解决方案1】：

由于没有其他人对这个问题提出意见，我想为了完整起见，我会用我目前所学的知识来回答我自己的问题。

根据W3Schools，Head 元素中应该只有六个标签，而 Map / Area 标签不在这六个标签中。此外，通过关联，当您的地图标记直接位于 img 标记之前时，它可以使标记更易于理解。

至于第二个问题，我认为我听到的少数消息来源要么在评估中不正确，要么在他们指的是服务器端图像映射时错误地引用了客户端图像映射。客户端图像地图非常易于访问。

作为图像地图的替代品：

有一些非 JavaScript 方法可以使用 div/span、浮动、z-indexing 和悬停伪选择器来创建图像地图，从而实现一般图像地图效果。但是应该避免这些，因为实际的图像映射可以通过添加 JavaScript 事件处理程序来实现相同的效果。

在 JavaScript 中，您可以观察鼠标的坐标，并为用户在图像的某个坐标内单击时设置事件处理程序，从而允许您以编程方式复制图像映射效果。但是，由于此技术仅使用 JavaScript，因此通常应避免使用它，因为禁用 JavaScript 的人无法使用它。

【讨论】：