多个分辨率的图像区域图，即x y坐标中的热点

Question

我在我的图片上使用区域地图，允许用户选择执行各种JavaScript功能的点。

形状的坐标被硬编码到html页面中，因为这允许我的脚本在各种页面上工作。不幸的是，我现在需要让页面以各种分辨率工作，这也要求图片比例为父Div的百分比（没有解决这个问题，客户要求）。

由于区域地图使用的坐标和百分比尚不支持，我想知道最好的方法应该是什么？

我能想到的唯一选择是：

1. 根据html为每个点创建Div，并将％置于
2. 将坐标传递给JavaScript并根据当前屏幕大小计算出％，然后将它们转换回坐标。
3. 询问网络并祈祷有人遇到过这个并找到了一个天才的解决方案：）

Answer 1

您可以在页面加载和window.resize上的javascript中进行一些坐标重新计算。使用jQuerys width()和height()函数，您可以获取当前图像大小，将其除以父div的宽度和高度，并将这些因子应用于图像映射坐标。

我认为这基本上就是这个jQuery插件的功能（未经过测试！）： http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

另一个解决方案是使用CSS转换（如果你不关心传统的浏览器支持;-)）。您可以检查当前的document.width（）和document.height（）值，然后将缩放值应用于img和map标记。