在窗口调整大小时调整图像地图大小
Posted
技术标签:
【中文标题】在窗口调整大小时调整图像地图大小【英文标题】：Resize image map on window resize 【发布时间】：2010-12-21 18:11:28 【问题描述】：我正在尝试在窗口调整大小事件中调整图像映射的大小。我得到的最接近的是使用鼠标点击事件，但它需要为我正在做的事情调整窗口大小。我正在使用 Firefox 3.5.5
我在某种程度上使用 jquery。这是我的示例 - 我想在窗口调整大小时调整大小的区域按钮位于左上角（单击它以调整地图和区域按钮的大小）：
http://www.whitebrickstudios.com/foghornstour/imagemap3.html
任何帮助将不胜感激！ 谢谢， 丰富
【问题讨论】：
您可能在imageMapResize 中有错字。你说scaleXY('theMap'，而我认为你的意思是scaleXY('myimage'？
github.com/davidjbradshaw/image-map-resizer
【参考方案1】：
我编写了一些简单的函数来重建每个事件的所有地图点。试试这个
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 而不是使用窗口宽度。这样我就不需要考虑任何额外的边框、边距、填充等。
我已经将它扩展成一个小库，它可以在调整图像大小时保持地图工作，并且还可以处理具有不同缩放比例的 X 和 Y。它还可以为您计算出缩放值。 github.com/davidjbradshaw/imagemap-resizer【参考方案2】：
我想你想要的是在 http://home.comcast.net/~urbanjost/semaphore.html
我展示了不同的示例，说明如何在您的图像显示尺寸发生变化时使您的图像地图坐标发生变化。
【讨论】：
我实际上在这些示例中合并了一些代码。我遇到的问题是，虽然图像地图会针对“点击”等事件调整大小，但它不会在“窗口调整大小”事件上调整。--确实如此，您只需调整浏览器 6 次即可获得它工作。我正在使用 FF 3.5 抱歉，我的链接坏了，现在已修复：whitebrickstudios.com/foghornstour/imagemap3.html 我已选择使用 %s 定位的 div，但有一天让它工作真的很酷。【参考方案3】：这是一个旧线程，但对于任何寻找类似甚至相同问题的解决方案的人来说，ImageMapster jQuery 插件似乎提供了最简单的解决方案。您可以使用它的 resize 方法（如果需要，它甚至可以为调整大小设置动画！）如下调整图像及其图像映射：
$('img').mapster( 'resize', newWidth, newHeight, resizeTime);
您可以在 ImageMapster's demo 页面上找到指向 jsFiddle that demonstrates resizing 的链接，这是一个图像及其地图，以响应浏览器窗口的更改。
【讨论】：
【参考方案4】：作为 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
【讨论】：
【参考方案5】：这里是一个不使用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 替换为您的默认地图大小
【讨论】：
【参考方案6】：在加载或调整窗口大小时重新计算图像映射坐标的具体示例：
这张图片是 1930 * 3360 ：
<div>
<img id = "alhambra" src="filename.png" usemap="#image-map" width=100%>
<map name="image-map">
<area target="" id = "home" title="home" href="" coords="1905,307,35,12" shape="rect">
<area target="" id = "vaciado" title="vaciado" href="" coords="141,367,1783,631" shape="rect">
<area target="" id = "tienda" title="tienda" href="" coords="282,1408,278" shape="circle">
<area target="" id = "stocks" title="stocks" href="" coords="1300,2968,722,2699" shape="rect">
<area target="" id = "whatsapp" title="whatsapp" href="" coords="506,2980,1788,3193" shape="rect">
<area target="" 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_;
var img_real_;
// 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>
【讨论】：
【参考方案7】：要在调整窗口大小时调用函数，请尝试以下操作：
$(window).bind('resize', function()
// resize the button here
);
另外，第 37 行缺少一个美元符号：
scaleXY('theMap',(window).width());
应该是：
scaleXY('theMap',$(window).width());
【讨论】：
虽然你说的是实话，但如果你费心阅读代码，OP 已经在这样做了。 所以它可以工作，但是，我必须调整 firefox 6 次才能使其工作。 IE是一团糟。我做了这些改变。这很有帮助，但是，它看起来像 Firefox，尤其是 IE 在调整大小时遇到了太多麻烦。我现在在想，我将坚持我原来的计划，只使用半精确定位的 div 来代替图像映射按钮。该死。不过，我会考虑这个问题，如果我想出并回答，我会发布它。谢谢你们的帮助。 我已经“费心”去读代码了；但是，问题本身并没有表明解决方案的这一部分不是问题。我为那些稍后在寻找解决方案时可能会发现它的人添加了基本的调整大小事件处理。我的问题的后半部分确实解决了代码中的一个问题，所以我不确定为什么我应该投反对票。【参考方案8】：如果您只需要调整图像大小，请使用以下技术： http://www.cssplay.co.uk/layouts/background.html
感谢 CSSPlay。
【讨论】：
我认为你错过了 danigb 的要点。我正在调整窗口大小时调整“图像地图区域”的大小。 现在我明白了。事实上，我已经打开了你的网址，但它对我不起作用（chrome）。我不得不做类似的事情，我最终使用 divs 而不是 imagemaps 并设置 position: absolute;以及以 % 为单位的顶部、左侧、宽度和高度。如果你什么我可以解释多一点。干杯丹妮 嘿 Danigb，我最终也使用 div 来定位带有 %s 的图像。尽管在未来的版本中使用图像映射仍然很酷。到目前为止，这就是我所拥有的图像地图。 home.comcast.net/~urbanjost/IMG/resizeimg4.html 哎呀，打算使用这个链接：whitebrickstudios.com/foghornstour/imagemap3.html以上是关于在窗口调整大小时调整图像地图大小的主要内容，如果未能解决你的问题，请参考以下文章