1

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

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

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

我能想到的唯一选择是：

  1. 根据 html 为每个点创建 Div 并放置它们
  2. 将坐标传递给 JavaScript 并根据当前屏幕尺寸计算出它们的百分比，然后将它们转换回坐标。
  3. 询问互联网并祈祷有人遇到过这个问题并找到了一个天才的解决方案:)
4

1 回答 1

2

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

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

另一种解决方案是使用 CSS 转换（如果您不关心旧版浏览器支持 ;-)）。您可以检查当前的 document.width() 和 document.height() 值，然后将比例值应用于img和map标签。

于 2013-05-07T12:47:25.207 回答