javascript - Resize image map on window resize

Question

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

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

Any help would be appreciated! Thank you, Rich

Answer 1

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