图像外的 HTML 图像映射答案

【问题标题】：HTML image map outside an image图像外的 HTML 图像映射
【发布时间】：2011-11-24 20:24:06
【问题描述】：

我必须在包含许多图像的网页上生成 <map> 和 <area> 元素。每个图像都必须通过usemap="#map1"、usemap="#map2" 等链接到其相应的<map>...

对于这种情况，我想添加一个 1x1 绝对定位（上：0，左：0）<img>（anchor-image）。然后，我会将所有<area> 标签合并为一个<map>（super-map），由anchor-image 引用。

试试这个，super-map 中定义的<area> 标签在我将鼠标悬停在它们上时不会激活（它们在 1x1 anchor-image 之外）。我尝试制作 anchor-image width:100%, height:100% 并使用它的 z-index（由于其他原因，我仍然必须与页面上的图像进行交互）。不幸的是，当 z-index 使 <area> 元素可点击时，它会阻止我与图像进行交互。

还有什么我可以尝试的想法吗？谢谢！

【问题讨论】：

标签： html map image imagemap area

【解决方案1】：

您能否详细说明为什么需要这么多地图？如果您有很多图片，为什么不将每张图片拆分为一个动作，然后简单地将它们放在a 标签中？

或者，为什么不将图像组合成一个更大的图像，然后使用更少的地图？

【讨论】：

我必须允许客户“标记”图像 - 通过在图像上绘制矩形来动态创建地图。他们可以多次标记每个图像。问题是每页也有很多图像，我试图避免创建单独的地图并跟踪哪个地图属于哪个图像。因此，我用锚图像尝试了这个想法。
为什么制作多张地图会有问题？听起来它们是生成的，而不是手写的。
谢谢，我最终把它们都分开了。