Question

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

我在某种程度上使用jquery。这是我的例子 - 我要在窗口调整大小时调整区域按钮位于左上角（单击它以调整地图和区域按钮的大小）：

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

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

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

我认为你想要的是 http://home.comcast.net/~urbanjost/semaphore.html

其中我展示了当图像显示尺寸发生变化时如何使图像地图坐标发生变化的不同示例。

Answer 3

这是一个旧线程，但对于寻找类似甚至相同问题的解决方案的任何人来说，ImageMapster jQuery插件似乎提供了最简单的解决方案。您可以使用其调整大小方法（如果需要，甚至可以调整大小调整的动画！），如下所示：调整图像大小及其图像映射：

$('img').mapster( 'resize', newWidth, newHeight, resizeTime);

您可以在ImageMapster's demo页面上找到jsFiddle that demonstrates resizing图片和图片的链接。它的地图以响应更改浏览器窗口。

Answer 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

Answer 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替换为默认地图尺寸

Answer 6

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

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

此外，第37行缺少一个美元符号：

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

应该是：

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

Answer 7

如果您只需要调整图像大小，请使用以下技巧： http://www.cssplay.co.uk/layouts/background.html

感谢CSSPlay。

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

7 个答案: