在窗口调整大小时调整图像映射的大小 [英] Resize image map on window resize

问题描述

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

I'm trying to resize an image map on window resize event. The closest I've gotten is to use a mouseclick event, but it needs to be window resize for what I'm doing. I'm using Firefox 3.5.5

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

I'm using jquery somewhat. Here's my example - the area button I want to resize on window resize is in the top left (click on it to resize map and area button):

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

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

Any help would be appreciated! Thank you, Rich

推荐答案

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

I wrote some simple function to rebuild all map points on every event. Try this

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

scaleValue can be calculated as oldWindowWidth/newWindowWidth. Of course you need to keep the value of oldWindowWidth on window resize. Maybe my solution not on time, but i hope this is useful to someone

这篇关于在窗口调整大小时调整图像映射的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！