Javascript 如何使图像地图具有响应性？

我正在尝试创建一个响应图像地图。当它在桌面模式下运行时效果很好，但当我切换到移动模式时，超链接不再工作。从昨天开始，我查看了一些视频并在线阅读，但仍然无法找到问题所在。任何帮助都将提前感谢

响应图像地图
身体{
字体系列：Helvetica、Arial、无衬线字体；
}
img{
边界：无；
高度：自动；
最大宽度：100%；
宽度：自动；
}
$（文档）.ready（函数（e）{
$（'img[usemap]'）。rwdImageMaps（）；
$（'area'）。在（'click'，function（）上{
警报（$（this.attr（'alt'）+'clicked'）；
});
});

这可以通过一个简单的浮动锚来实现，浮动锚的大小和位置以百分比表示。尝试以几个不同的屏幕宽度加载下面的代码段。您将看到一个红色边框的浮动锚在所有屏幕宽度的Jupiter上悬停——图片随着视口的变化而增减，链接相应地调整其尺寸

#包装器{
宽度：100%；
最大宽度：812px；/*图像的实际宽度——如果超过此值，则表现异常*/
位置：相对位置；
}
#包装机{
最大宽度：100%；
}
#锚定木星{
边框：1px纯红；
身高：44%；
宽度：17%；
位置：绝对位置；
左：39.75%；
最高：50%；
}

您可能已使图像响应，但地图的坐标是静态的，这就是为什么当地图大小更改时，坐标不能正常工作的原因。你可能想考虑放弃地理地图来支持地理链接。谢谢你在ScottMarcus花时间回答我的问题。我在网页设计方面是新的。你能解释我多一点吗？像地理定位链接？交替地，你可以使用不可见的<代码> <代码>元素在图片上，绝对按百分比排列。这样，当页面/图像缩放时，链接也会缩放。@AlexanderNied如果我使用tag，它将以所有内容为目标否？如果我使用tag，它将以所有内容为目标否？--好的，为了实现这个计划，您将使用特定的ID，以便使用CSS适当地将元素定位到目标上，以调整其大小并将其定位到目标上。这就是你要问的吗？非常感谢，现在更清楚了，但还有一个问题。你怎么得到木星的坐标？比如说，如果我想得到金星和天王星的坐标，我怎么能做到呢？@marie-老实说，我只是受过教育的猜测和反复试验。我给了链接一个开始的边界，这样我就可以看到它的边界。然后我估计，在这张图片中，木星占据了屏幕的下半部分（

顶部：50%

，

高度：50%

），可能是总宽度的十分之一（

宽度：10%

），并且略低于中间部分（

左侧：40%

）。从那里我上下调整这些属性，直到它适合木星。一旦合适了，我就去掉了边框。您可以在代码中完成所有这些操作并不断刷新页面，但在Chrome开发工具中实时完成这些操作会更快。祝你好运明白了谢谢这么多像你这样的人让这个世界变得美丽