Javascript 调整窗口上的图像贴图大小调整大小

我正在尝试在“窗口调整大小”事件中调整图像贴图的大小。我得到的最接近的结果是使用mouseclick事件，但它需要根据我所做的调整窗口大小。我正在使用Firefox 3.5.5

我在使用jquery。下面是我的示例-我想在窗口调整大小时调整大小的区域按钮位于左上角（单击该按钮可调整地图和区域按钮的大小）：

任何帮助都将不胜感激！ 非常感谢。

---

Rich

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

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

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

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

应该是：

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

---

如果只需要调整图像大小，请使用以下技术：

---

感谢CSSPlay。

我想你想要的是

---

在这里，我展示了如何在图像显示大小发生变化时使图像地图坐标发生变化的不同示例。

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

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

---

您可以在页面上找到图像及其地图的链接，以响应浏览器窗口的更改。

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

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

作为Viktor答案的修改版本，此版本可以处理多个大小调整。它存储初始值，以便与任何未来调整大小进行比较。这也会使用，所以它不会在调整大小时反复运行

    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;
    }
};

---

将500替换为默认的贴图大小

您在

imageMapResize

中可能有输入错误。你说的是

scaleXY（'theMap'

），而我认为你的意思是

scaleXY（'myimage'

？虽然你说的是实话，但如果你费心阅读代码，OP已经在这么做了。所以它可以工作，但是，我必须调整firefox 6次才能工作。IE是一团糟。我做了这些更改。这很有帮助，但是，看起来firefox，尤其是IE在调整大小方面遇到了太多问题。我现在想，我正在我会坚持我原来的计划，只使用半精确定位的div来代替图像地图按钮。该死。我会考虑这个问题，如果我能想出答案，我会发布它。谢谢你们的帮助。我已经“费心了”阅读代码；但是，问题本身并没有明确说明解决方案的这一部分不是问题。我为那些以后在搜索解决方案时可能会发现这一点的人添加了基本的调整大小事件处理。我问题的后半部分确实解决了代码中的一个问题，因此我不确定为什么应该收到downvote、 我想你没有抓住重点。我想在“窗口调整”上调整“图像地图区域”的大小。现在我明白了。事实上，我已经打开了你的url，但它对我不起作用（chrome）。我不得不做一些类似的事情，我最终使用divs而不是imagemaps，并将位置设置为：绝对；以及顶部、左侧、宽度和高度（单位为%）。如果你能解释一下我的意思的话。干杯daniHey Danigb，我最终使用divs来定位%s的图像。尽管在未来版本中使用图像贴图仍然很酷。T到目前为止，我的图片地图就是这样的。woops，意思是使用这个链接：我实际上在这些例子中加入了一些代码。不过，我遇到的问题是，尽管图片地图会为“单击”等事件调整大小，但它不会在“窗口调整大小”事件中进行调整。--是的，你只需要调整浏览器6次大小就可以将其打开工作。我正在使用FF 3.5。很抱歉，我的链接坏了，现在已经修复了：我选择使用%s定位的div，但是有一天能让它工作起来会很酷。+1我正在使用这个函数，工作起来很有魅力。但是我使用了

img.width/img.naturalWidth

而不是使用窗口宽度。这样我就不需要使用任何额外的边框了s、 考虑到边距、填充等。我已将其扩展为一个小库，它可以在调整图像大小时保持贴图的工作状态，还可以处理具有不同缩放比例的X和Y。它还可以为您计算缩放值。

var coords = ImageMap.getCoords();
window.onload = function () {
    ImageMap.resize(coords, 500);
}
window.onresize = function () {
    ImageMap.resize(coords, 500);
}