javascript - 在窗口调整大小时调整图像映射

Question

我正在尝试在窗口调整大小事件中调整图像映射的大小。我得到的最接近的是使用 mouseclick 事件，但它需要为我正在做的事情调整窗口大小。我正在使用 Firefox 3.5.5

我在某种程度上使用了 jquery。这是我的示例 - 我想在调整窗口大小时调整大小的区域按钮位于左上角(单击它以调整 map 和区域按钮的大小):

http://www.whitebrickstudios.com/foghornstour/imagemap3.html

任何帮助将不胜感激! 谢谢， 丰富

Answer 1

我写了一些简单的函数来重建每个事件的所有 map 点。试试这个

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 的值。也许我的解决方案不及时，但我希望这对某人有用