Resize image map on window resize

Question

Hello,

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

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 2

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

Thanks to CSSPlay.

Answer 3

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.