调整HTML地图图像的大小

时间:2011-10-05 17:46:17

标签: css html map resize-image

在一个小网站中,页面只由一个图像组成,多个链接使用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>

解决问题的最佳解决方案是什么?

由于

3 个答案:

答案 0 :(得分:3)

您可以缩放/缩放div,

示例(半尺寸):

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

答案 1 :(得分:1)

我认为最好的解决方案是调整图像大小,然后编写一个小脚本,允许您选择一个矩形(或只是在图像上单击4次),提示输入和URL,然后吐出HTML对于那个矩形。这样生成地图会快得多。

如果您认为将来再次这样做,最好使用CSS定位真实链接来构建地图,但是使用顶部和左坐标指定为相对于图像的百分比。这样你就可以适应尺寸的变化(但不能完全改变图像)。

答案 2 :(得分:0)

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

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