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

Answer 1

Here is a solution that does not use jQuery.

First, build a library function:

var ImageMap = {
    resize: function(coords, mapWidth) {
        var areas = document.getElementsByTagName('area'),
            imageWidth = document.querySelector("#map").clientWidth,
            resize = imageWidth / mapWidth;

        for (var i=0; iMath.round(x*resize));
            areas[i].coords = temp.join(',');
        }
    },
    getCoords: function(){
        var areas = document.getElementsByTagName('area'),
            array = [];
        for (var i=0; i+x));
        }
        return array;
    }
};

Then, call the resize function when the page is initially loaded, and when it is resized:

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

Replace 500 with whatever your default map size is