Resize image map when resizing window

Question

I am trying to resize an image map on a window resize event. The closest I got is to use the mouseclick event, but for what I am doing, I need to resize the window. I am using Firefox 3.5.5

I am using jquery. Here is my example - the button for the area that I want to resize to the window is in the upper left corner (click on it to resize the map button and the area):

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

Any help would be appreciated! Thanks Rich

Answer 1

I wrote some simple function to restore all map points on each event. try it

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 when resizing the window. Maybe my decision is not on time, but I hope this is useful to someone.

Answer 2

I think you want on http://home.comcast.net/~urbanjost/semaphore.html

where I show different examples of how to change the coordinates of your image map when the image is resized.

Answer 3

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

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

You can find the link on the ImageMapster demo page on jsFiddle to demonstrate resizing the image and its map in response to changing the browser window.

Answer 4

Like Victor’s modified version, this version can handle several sizes. It saves the initial values ​​for comparison with any future resizing. It also uses waitForFinalEvent , so it does not start again and again when resizing.

 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 5

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

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

In addition, line 37 is missing a dollar sign:

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

It should be:

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

Answer 6

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

Thanks CSSPlay.