Изменение размера изображений 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

Вот небольшая библиотека, которая решает эту проблему.

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