调整HTML地图图像的大小

Question

在一个小型网站中，页面仅由使用html地图的多个链接构成的单个图像组成，但我想调整图像大小（较小的图像），但调整所有图像并更改大小是非常痛苦的所有链接坐标。

<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> 

什么是解决问题的更好的解决方案？

感谢

Answer 1

您可以放大/刻度格，

例如（半角）：

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

Answer 2

我认为最好的解决办法是调整图像，然后写一个小脚本，它允许你选择一个矩形（或者直接在图像上单击4次），提示输入和URL，然后吐出该矩形的HTML。这样生成地图会更快。

如果你看到自己在将来再次做这件事，最好是用CSS定位真实链接，但是顶部的坐标指定为相对于图像的百分比。这样你应该适应尺寸的变化（但不能完全改变图像）。

Answer 3

这是一个解决这个问题的小小的lib。

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