我想調整窗口大小調整事件的圖像映射。我得到的最接近的是使用鼠標點擊事件，但它需要爲我正在做的事情調整窗口大小。我正在使用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