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

Question

我正在尝试在窗口调整大小事件上调整图像映射的大小.我最接近的是使用鼠标点击事件,但它需要为我正在做的事情调整窗口大小.我正在使用Firefox 3.5.5

我有点使用jquery.这是我的例子 - 我要在窗口调整大小时调整区域按钮位于左上角(单击它以调整地图和区域按钮的大小):

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

任何帮助,将不胜感激!谢谢Rich

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

Answer 2

要在调整窗口大小时调用函数，请尝试以下操作：

$(window).bind('resize', function() {
    // resize the button here
});

另外，第 37 行缺少美元符号：

scaleXY('theMap',(window).width());

它应该是：

scaleXY('theMap',$(window).width());