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