我正在尝试在窗口调整大小事件中调整图像映射的大小。我得到的最接近的是使用鼠标点击事件，但它需要为我正在做的事情调整窗口大小。我正在使用 Firefox 3.5.5
我在某种程度上使用 jquery。这是我的示例 - 我想在窗口调整大小时调整大小的区域按钮位于左上角（单击它以调整地图和区域按钮的大小）：
http://www.whitebrickstudios.com/foghornstour/imagemap3.html
任何帮助将不胜感激！ 谢谢， 丰富
【问题讨论】：
imageMapResize 中有错字。你说scaleXY('theMap'，而我认为你的意思是scaleXY('myimage'？
标签： javascript jquery-ui resize window imagemap
我编写了一些简单的函数来重建每个事件的所有地图点。试试这个
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 的值。也许我的解决方案没有及时，但我希望这对某人有用
【讨论】：
img.width / img.naturalWidth 而不是使用窗口宽度。这样我就不需要考虑任何额外的边框、边距、填充等。
我想你想要的是在 http://home.comcast.net/~urbanjost/semaphore.html
我展示了不同的示例，说明如何在您的图像显示尺寸发生变化时使您的图像地图坐标发生变化。
【讨论】：
这是一个旧线程，但对于任何寻找类似甚至相同问题的解决方案的人来说，ImageMapster jQuery 插件似乎提供了最简单的解决方案。您可以使用它的 resize 方法（如果需要，它甚至可以为调整大小设置动画！）如下调整图像及其图像映射：
$('img').mapster( 'resize', newWidth, newHeight, resizeTime);
您可以在 ImageMapster's demo 页面上找到指向 jsFiddle that demonstrates resizing 的链接，这是一个图像及其地图，以响应浏览器窗口的更改。
【讨论】：
作为 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
【讨论】：
这里是一个不使用jQuery的解决方案。
首先，构建一个库函数：
var ImageMap = {
resize: function(coords, mapWidth) {
var areas = document.getElementsByTagName('area'),
imageWidth = document.querySelector("#map").clientWidth,
resize = imageWidth / mapWidth;
for (var i=0; i<coords.length; i++) {
var temp = coords[i].map(x=>Math.round(x*resize));
areas[i].coords = temp.join(',');
}
},
getCoords: function(){
var areas = document.getElementsByTagName('area'),
array = [];
for (var i=0; i<areas.length; i++) {
array.push(areas[i].coords.split(',').map(x=>+x));
}
return array;
}
};
然后，在页面初始加载和调整大小时调用resize函数：
var coords = ImageMap.getCoords();
window.onload = function () {
ImageMap.resize(coords, 500);
}
window.onresize = function () {
ImageMap.resize(coords, 500);
}
将 500 替换为您的默认地图大小
【讨论】：
在加载或调整窗口大小时重新计算图像映射坐标的具体示例：
这张图片是 1930 * 3360 ：
<div>
<img id = "alhambra" src="filename.png" usemap="#image-map" width=100%>
<map name="image-map">
<area target="" alt="home" id = "home" title="home" href="" coords="1905,307,35,12" shape="rect">
<area target="" alt="vaciado" id = "vaciado" title="vaciado" href="" coords="141,367,1783,631" shape="rect">
<area target="" alt="tienda" id = "tienda" title="tienda" href="" coords="282,1408,278" shape="circle">
<area target="" alt="stocks" id = "stocks" title="stocks" href="" coords="1300,2968,722,2699" shape="rect">
<area target="" alt="whatsapp" id = "whatsapp" title="whatsapp" href="" coords="506,2980,1788,3193" shape="rect">
<area target="" alt="direccion" id = "direccion" title="direccion" href="" coords="43,3215,1883,3324" shape="rect">
</map>
</div>
并在正文后添加脚本为：
</body>
<script>
let text_home_coord = document.getElementById('home').coords;
let text_vaciado_coord = document.getElementById('vaciado').coords;
let text_tienda_coord = document.getElementById('tienda').coords;
let text_stocks_coord = document.getElementById('stocks').coords;
let text_whatsapp_coord = document.getElementById('whatsapp').coords;
let text_direccion_coord = document.getElementById('direccion').coords;
function img_map_response(){
// get width and height in pixel
var width_100_in_px = document.getElementById('alhambra').offsetWidth;
var height_100_in_px = document.getElementById('alhambra').offsetHeight;
// recalculate coords of image map
function get_coor_resp(nombre_coords){
// real width and height of image map
var img_real_width="1930";
var img_real_height="3360";
// convert string coords to array
text_array = nombre_coords.split(',');
// rect
if (text_array.length == 4) {
// convert strig to integer
x1 = parseInt(parseInt(text_array[0])*parseInt(width_100_in_px)/parseInt(img_real_width));
y1 = parseInt(parseInt(text_array[1])*parseInt(height_100_in_px)/parseInt(img_real_height));
x2 = parseInt(parseInt(text_array[2])*parseInt(width_100_in_px)/parseInt(img_real_width));
y2 = parseInt(parseInt(text_array[3])*parseInt(height_100_in_px)/parseInt(img_real_height));
// result converted in array of strings
array_txt =[x1.toString(), y1.toString(), x2.toString(), y2.toString()]
console.log("array_txt",array_txt)
return array_txt.join(',')
// circle
} else {
// convert strig to integer
x1 = parseInt(parseInt(text_array[0])*parseInt(width_100_in_px)/parseInt(img_real_width));
y1 = parseInt(parseInt(text_array[1])*parseInt(height_100_in_px)/parseInt(img_real_height));
r = parseInt(parseInt(text_array[2])*parseInt(width_100_in_px)/parseInt(img_real_width));
// result converted in array of strings
array_txt =[x1.toString(), y1.toString(), r.toString()]
return array_txt.join(',')
}
}
// set coords by recalculate coords (converted in string)
document.getElementById('home').coords=get_coor_resp(text_home_coord);
document.getElementById('vaciado').coords=get_coor_resp(text_vaciado_coord);
document.getElementById('tienda').coords=get_coor_resp(text_tienda_coord);
document.getElementById('stocks').coords=get_coor_resp(text_stocks_coord);
document.getElementById('whatsapp').coords=get_coor_resp(text_whatsapp_coord);
document.getElementById('direccion').coords=get_coor_resp(text_direccion_coord);
}
// add events load and resize for recalculate coords
window.addEventListener('load', img_map_response);
window.addEventListener('resize', img_map_response);
</script>
</html>
【讨论】：
要在调整窗口大小时调用函数，请尝试以下操作：
$(window).bind('resize', function() {
// resize the button here
});
另外，第 37 行缺少一个美元符号：
scaleXY('theMap',(window).width());
应该是：
scaleXY('theMap',$(window).width());
【讨论】：
如果您只需要调整图像大小，请使用以下技术： http://www.cssplay.co.uk/layouts/background.html
感谢 CSSPlay。
【讨论】：