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