Resize HTML map images

Question

In a small website where the pages are only composed by a single image with multiple links using html map, I want to resize the images (smaller images) but it is extremely painful to resize all the images and change all the link coordinates.

<div style="text-align:center; width:586px; margin-left:auto; margin-right:auto;">
<img id="Image-Maps_5201110040649307" src="http://site.com/ui_prototype/login.png" usemap="#Image-Maps_5201110040649307" border="0" width="586" height="1162" alt="" />
<map id="_Image-Maps_5201110040649307" name="Image-Maps_5201110040649307">
<area shape="rect" coords="59,550,297,614" href="http://site.com/ui_prototype/main_menu.html" alt="" title=""    />
</map>
</div>

What is the better solution to solve the problem?

Thanks

Answer 1

You may zoom/scale the div,

example(half size):

style="zoom:.5;-o-transform: scale(.5);-moz-transform: scale(.5)"

Answer 2

Here's a little lib that solves this problem.

https://github.com/davidjbradshaw/imagemap-resizer

Answer 3

I think the best solution would be to resize the images and then write a small script that will allow you to select a rectangle (or simply click 4 times on the image), prompt for entering and URL and then spit out the HTML for that rectangle. This way it would be much faster to generate the map.

If you see yourself doing this again in the future, it would be better to build the map with real links positioned with CSS, but with the top & left coordinates specified as percentages relative to the image. This way you should be imune to size changes (but not to changing the image entirely).