I'm using an Area Map over my image to allow users to select points which perform various JavaScript functions.
我在我的图像上使用了一个区域映射，允许用户选择执行各种JavaScript函数的点。
The coordinates of the shapes are hard coded into the html page as this allows my script to work on various pages. Unfortunately I now need to have the page work at various resolutions, which also requires that the picture scale as a percentage of the parent Div (no work around on this, customer requirement).
形状的坐标被硬编码到html页面中，因为这允许我的脚本在不同的页面上工作。不幸的是，我现在需要让页面以各种分辨率工作，这也要求图片按父Div的百分比进行缩放(不涉及这个，客户需求)。
As area maps uses coordinates and percentages aren't yet supported I was wondering what the best approach to this should be?
由于区域地图使用坐标和百分比还不支持，我想知道最好的方法应该是什么?
The only options I can think of are:
我能想到的唯一选择是:
- Create Div's for each point based on the html and % place them
- 根据html为每个点创建Div，并将它们放置%
- Pass the coordinates into the JavaScript and work out their % based on the current screen size, then convert them back into coordinates.
- 将坐标转换为JavaScript并根据当前屏幕大小计算出它们的%，然后将它们转换回坐标。
- Ask the inter webs and pray somebody has encountered this and found a genius solution :)
- 问一下互联网，祈祷有人遇到了这个问题，并找到了一个天才的解决方案:
1 个解决方案
#1
2
You could do some coordinate recalculations in javascript on page load and on window.resize. With jQuerys width() and height() functions you can get the current image size, divide it by the width and height of the parent div and apply these factors to your image map coordinates.
您可以在页面加载和window.resize上使用javascript进行一些坐标重新计算。通过jQuerys width()和height()函数，您可以获得当前的图像大小，将其除以父div的宽度和高度，并将这些因素应用到图像映射坐标中。
I think that's basically what this jQuery plugin does (not tested!): http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html
我认为这就是jQuery插件的基本功能(没有测试!):http://mattstow.com/experimental / response - image-mailaps/rwd - image-image-mailap .html
Another solution would be to use CSS transforms (if you don't care for legacy browser support ;-)). You could check for the current document.width() and document.height() values and then apply a scale value to the img and the map tag.
另一个解决方案是使用CSS转换(如果您不关心遗留浏览器的支持;-)。您可以检查当前的document.width()和document.height()值，然后向img和map标记应用scale值。
#1
2
You could do some coordinate recalculations in javascript on page load and on window.resize. With jQuerys width() and height() functions you can get the current image size, divide it by the width and height of the parent div and apply these factors to your image map coordinates.
您可以在页面加载和window.resize上使用javascript进行一些坐标重新计算。通过jQuerys width()和height()函数，您可以获得当前的图像大小，将其除以父div的宽度和高度，并将这些因素应用到图像映射坐标中。
I think that's basically what this jQuery plugin does (not tested!): http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html
我认为这就是jQuery插件的基本功能(没有测试!):http://mattstow.com/experimental / response - image-mailaps/rwd - image-image-mailap .html
Another solution would be to use CSS transforms (if you don't care for legacy browser support ;-)). You could check for the current document.width() and document.height() values and then apply a scale value to the img and the map tag.
另一个解决方案是使用CSS转换(如果您不关心遗留浏览器的支持;-)。您可以检查当前的document.width()和document.height()值，然后向img和map标记应用scale值。