我想调整窗口大小调整事件的图像映射。我得到的最接近的是使用鼠标点击事件，但它需要为我正在做的事情调整窗口大小。我正在使用Firefox 3.5.5在窗口调整大小的图像映射调整大小
我在某种程度上使用jquery。这里是我的例子 - 区域按钮，我想调整的窗口大小调整是在左上角（点击它来调整地图和区域按钮）：
http://www.whitebrickstudios.com/foghornstour/imagemap3.html
任何帮助，将不胜感激！ 谢谢 丰富
要打电话的时候，窗口大小的功能，请尝试以下操作：
$(window).bind('resize', function() {
// resize the button here
});
此外，第37行缺少一个美元符号：
scaleXY('theMap',(window).width());
它应该成为：
scaleXY('theMap',$(window).width());
虽然你说实话，OP已经这样做了如果你懒得读代码 – 2009-11-30 19:34:31
所以它可以工作，但是，我必须调整firefox的大小以使它工作6次，IE是一团糟。 我做了这些改变。这很有帮助，但是，它看起来像Firefox，尤其是IE浏览器在调整大小时遇到了太多麻烦。 我现在在想，我要坚持我原来的计划，只是使用准确定位的div来代替图像映射按钮。 该死的。我会考虑这一点，如果我想出了答案，我会发布它。 感谢您的帮助球员。 – Kozy 2009-11-30 23:58:52
这里是链接： http://www.whitebrickstudios.com/foghornstour/imagemap3.html – Kozy 2009-11-30 23:59:43
如果您只需要调整im年龄，使用此技术： http://www.cssplay.co.uk/layouts/background.html
感谢CSSPlay。
我想你错过了点丹吉。我正在调整窗口大小调整“图像地图区域”的大小。 – Kozy 2009-12-02 17:47:16
现在我明白了。事实上，我已经打开了你的网址，它并不适合我（铬）。 我不得不做类似的事情，我结束了使用div而不是imagemaps并设置位置：绝对;以及以％为单位的顶部，左侧，宽度和高度。 如果你我能解释一点点。 干杯 dani – danigb 2009-12-09 16:49:46
嘿Danigb，我结束了使用div以及定位图像与％s。 虽然在将来的版本中使用图像映射仍然很酷。这是我迄今为止的图像地图。 http://home.comcast.net/~urbanjost/IMG/resizeimg4.html – Kozy 2009-12-24 19:17:18
我想你想要的是在 http://home.comcast.net/~urbanjost/semaphore.html
，我展示了如何让您的图像地图坐标变化时，图像的显示尺寸的变化不同的例子。
我其实包含了一些这些例子中的代码。但我碰到的问题是，虽然图像地图会调整像“点击”这样的事件，但它不会根据“窗口大小调整”事件进行调整。 - 它的确如此，您只需调整浏览器6次即可获取它工作。我正在使用FF 3.5 对不起，我的链接崩溃了，现在已修复： http://www.whitebrickstudios.com/foghornstour/imagemap3.html 我选择使用％s定位的div， d有一天真的很酷。 – Kozy 2009-12-24 19:58:52
这是一个古老的线程，但对于任何寻找类似或甚至相同问题的解决方案的人来说，jQuery插件似乎都提供了最简单的解决方案。您可以使用它的大小调整方法（如果需要的话甚至可以动画调整大小！）按如下方式与它的影像地图一起调整图像大小：
$('img').mapster('resize', newWidth, newHeight, resizeTime);
你可以找到一个jsFiddle that demonstrates resizing图像上ImageMapster's demo页面的链接&其地图响应于更改浏览器窗口。
我写了一些简单的函数来重建每个事件的所有地图点。试试这个
function mapRebuild(scaleValue) {
var map = $("#imgmap"); // select your map or for all map you can choose $("map").each(function() { map = $(this);.....})
map.find("area").each(function() { // select all areas
var coords = $(this).attr("coords"); // extract coords
coords = coords.split(","); // split to array
var scaledCoords = "";
for (var coord in coords) { // rebuild all coords with scaleValue
scaledCoords += Math.floor(coords[coord] * scaleValue) + ",";
}
scaledCoords = scaledCoords.slice(0, -1); // last coma delete
$(this).attr("coords", scaledCoords); // set new coords
});
}
scaleValue可以计算为oldWindowWidth/newWindowWidth。当然，你需要在窗口大小上保留oldWindowWidth的值。也许我的解决方案不准时，但我希望这对某人有用
+1我正在使用这个功能，就像一个魅力。但我使用'img.width/img.naturalWidth'而不是使用窗口宽度。这样我就不需要考虑任何额外的边界，边距，填充等。 – 2013-09-23 09:55:35
我已经将这个扩展到了一个小小的库，它可以在图像大小调整时保持地图的工作，并且还可以处理具有不同缩放比例的X和Y.它也为您计算缩放值。 https://github.com/davidjbradshaw/imagemap-resizer – 2014-03-12 15:56:54
作为Viktor答案的修改版本，此版本可以处理多个大小调整。它存储初始值，以便与将来的任何调整大小进行比较。这也使用waitForFinalEvent，所以它不会反复调整大小。
var mapImg = $('#mapImg');
var naturalWidth = 1200; // set manually to avoid ie8 issues
var baseAreas = new Array();
var scaleValue = mapImg.width()/naturalWidth;
$(window).resize(function() {
waitForFinalEvent(function() {
scaleValue = mapImg.width()/naturalWidth;
mapRebuild(scaleValue);
}, 500, 'resize-window');
});
function mapRebuild(scaleValue) {
var map = $("#imgMap");
var mapareas = map.find('area');
if (baseAreas.length == 0) {
mapareas.each(function() {
baseAreas.push($(this).attr('coords')); // set initial values
});
}
mapareas.each(function(index) {
var coords = baseAreas[index]; // use the corresponding base coordinates
coords = coords.split(',');
var scaledCoords = '';
for (var coord in coords) {
scaledCoords += Math.floor(coords[coord] * scaleValue) + ',';
}
scaledCoords = scaledCoords.slice(0, -1);
$(this).attr('coords', scaledCoords);
});
}
mapRebuild(scaleValue); // initial scale
你可能在'imageMapResize'中有一个输入错误。你说'scaleXY（'theMap''，当我认为你的意思是'scaleXY（'myimage''？ – 2009-11-30 19:04:51
https://github.com/davidjbradshaw/image-map-resizer – Blazemonger 2017-07-03 18:14:08