Recalculate image map after window resize

Question

I have an interesting problem:

My girfriend (painter...) wants to have a web page like this:

1. The first page is just an image, through all screen - with no slider etc. So there is a problem of resizing images for different resolutions.
2. On this image are some windows, where a user can navigate through the rest of the page.

SOLUTIONS:

1. So, for the first problem there is a nice solution - jquery. It works great, no problem.

2. For the second problem, there is image maps, which works fine.

PROBLEM:

How do I combine the first and second solutions? The only problem I haven't found a solution for yet is how to dynamically calculate imagemap coordinates for a polygonal shape. (ie whatever the screen resolution is, the imagemap properties will always stay at the right spot).

For rectangle shapes I found this. What about poly shape?

Does somebody have some ideas on how to accomplish this?

Answer 1

You can use JQuery plugin ImageMapster for your image-maps. This plugin can dinamically re-count areas after resizig and have other usefull features.

And ever if you deside to write own solution, I suppose explore the code of the plugin can help you with your resizing task.

Answer 2

The solution should be the same as it is for the rect shape, because you're just scaling co-ordinates in both cases.

A point is a point, and both shapes are made up of points.