调整 HTML 地图图像的大小答案

【问题标题】：Resize HTML map images调整 HTML 地图图像的大小
【发布时间】：2015-01-29 21:08:08
【问题描述】：

在一个页面仅由使用 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>

解决问题的更好办法是什么？

谢谢

【问题讨论】：

标签： css html map resize-image

【解决方案1】：

您可以缩放/缩放 div，

示例（半号）：

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

【讨论】：

CSS zoom 标签自 2018 年起已弃用。请改用 transform: scale(0.5)。

【解决方案2】：

这里有一个小库可以解决这个问题。

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

【讨论】：

【解决方案3】：

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

如果您以后看到自己再次这样做，最好使用 CSS 定位的真实链接构建地图，但将顶部和左侧坐标指定为相对于图像的百分比。这样，您应该不受大小变化的影响（但不能完全改变图像）。

【讨论】：