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

If you only need to resize the image, use this technique: http://www.cssplay.co.uk/layouts/background.html

Thanks to CSSPlay.

Answer 2

I think what you want is at http://home.comcast.net/~urbanjost/semaphore.html

where I show different examples of how to make your image map coordinates change when your image display size changes.

Answer 3

To call a function when the window is resized, try the following:

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

Also, line 37 is missing a dollar sign:

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

It should be:

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

Answer 4

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

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

Answer 5

As a modified version of Viktor's answer, this version can handle multiple resizes. It stores initial values for comparison against any future resize. This also uses waitForFinalEvent so it doesn't run over and over on resize.

    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 6

This is an old thread but for anyone looking for a solution for a similar or even identical problem, the ImageMapster jQuery plugin appears to provide the easiest solution. You can use its resize method (which can even animate the resizing if desired!) as follows to resize an image along with its image map:

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

You can find a link on ImageMapster's demo page to a jsFiddle that demonstrates resizing an image & its map in response to changing the browser window.