Изменение координат Map Area при изменении размера картинки

0 из 5, голосов: 0

Удобный Area Map Generator: https://www.image-map.net

Скрипт ресайза Area Map от David Bradshaw https://github.com/davidjbradshaw/imagemap-resizer

Вот скрипты David Bradshaw:

Пример на чистом JavaScript

Скачать zip-архив с этим примером на чистом JavaScript

Код этого примера на чистом JavaScript:


<!DOCTYPE html><html><head></head><body>

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="square.jpg" usemap="#image-map">

<map name="image-map">
<area target="_blank" href="https://yandex.ru" coords="41,32,408,404" shape="rect">
<area target="_blank" href="https://www.google.ru" coords="416,34,796,405" shape="rect">
<area target="_blank" href="https://mail.ru" coords="40,412,409,788" shape="rect">
<area target="_blank" href="https://www.bing.com" coords="415,412,790,792" shape="rect">
</map>

<!--Подключаем скрипт David Bradshaw-->
<script type="text/javascript" src="imageMapResizer.min.js"></script>

<!--Ниже (как говорит David Bradshaw) размещаем вызов функции-->
<script type="text/javascript"> imageMapResize(); </script>

</body></html>

Версия скрипта с JQuery, вроде, такая же, как на чистом JavaScript, только еще нужно подключить JQuery:

Пример на JQuery + JavaScript

Скачать zip-архив с этим примером на JQuery + JavaScript

Код этого примера на JQuery + JavaScript:


<!DOCTYPE html><html><head></head><body>

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="square.jpg" usemap="#image-map">

<map name="image-map">
<area target="_blank" href="https://yandex.ru" coords="41,32,408,404" shape="rect">
<area target="_blank" href="https://www.google.ru" coords="416,34,796,405" shape="rect">
<area target="_blank" href="https://mail.ru" coords="40,412,409,788" shape="rect">
<area target="_blank" href="https://www.bing.com" coords="415,412,790,792" shape="rect">
</map>

<!--Подключаем библиотеку JQuery-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<!--Подключаем скрипт David Bradshaw-->
<script type="text/javascript" src="imageMapResizer.min.js"></script>

<!--Размещаем вызов функции-->
<script type="text/javascript"> $('map').imageMapResize(); </script>

</body></html>

Посмотрите источник этих скриптов:

По поводу ресайза изображений в Area Map есть очень хорошее обсуждение: https://overcoder.net/q/84418/...

И в обсуждении есть самый хороший ответ:

David Bradshaw 27 фев. 2014 пишет:

Я написал небольшую небольшую библиотеку, чтобы сохранить масштабируемое изображение с масштабируемым изображением, поэтому карта остается синхронно с масштабированием изображения. Полезно, если вы хотите сопоставить процентное масштабированное изображение и т.д.

Он может использоваться с jQuery или без него.

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

И вы можете видеть, как он работает.

http://davidjbradshaw.com/imagemap-resizer/example/

Восхищенные комментарии:

- Это круто! Хотел бы я поднять голос несколько раз

- Это довольно круто! Но есть ли простой способ подсветить область при наведении?

- Это абсолютно фантастически .. сработало как шарм и сэкономило мне много часов! @craphunter: На мой взгляд, для подсветки должен быть написан другой плагин, эта библиотека Дэвида отлично справляется со своей задачей!

- спасибо за добычу :D

- Это действительно прекрасно работает. Спасибо!

- @Steve: Привет, Дэвид. Это работает на адаптивных изображениях? то есть: изображения, которые изначально имеют ширину 100%? Благодарю.

- @Steve Стив, да, это главная причина этого.

- Это фантастическая библиотека, спасибо. Я предложил небольшое изменение в коде, касающееся изменения хеша. Это особенно полезно с ростом SPA / React / Vue / и т. Д.

Еще интересная ссылка: как сделать масштабируемую карту (map area) с подсветкой областей.