Масштабируемая карта (map area) с подсветкой областей.

Потребовалось сделать на сайте интерактивную карту с подсветкой, по html технологии тег <map> служит контейнером для элементов <area> активные области для карт-изображений, но хотелось сделать ее «резиновой«, что стандартный html не позволяет реализовать. Пришлось смотреть в сторону JS.
Нашел два проекта:

  1. rwdImageMaps — проект позволяет масштабировать картинку на основе image maps.
  2. maphilight — проект позволяет подсвечивать картинку на основе image maps.

Но в месте они не работают 🙁

Пришлось поправить maphilight

Тут лежит демо с поправленными скриптами.

P.S. Очень хороший online-генератор map area.

This entry was posted on Пятница, 6 февраля, 2015 at 15:59 and is filed under Без рубрики. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

4 комментария to “Масштабируемая карта (map area) с подсветкой областей.”

  1. newJS:
    30.11.2015 в 10:07

    На сайте есть программа Генератор map карт и есть скрипт умеющий масштабировать карты.

  2. Антон:
    30.11.2015 в 15:32

    Большое спасибо! Сочетание подсветки с возможностью масштабирования… Это очень классно!

  3. re:
    18.05.2017 в 14:38

    Очень большое спасибо! Искал решение три дня, уже собрался рисовать на SVG! Ваше решение работает именно так как нужно!

  4. re:
    18.05.2017 в 14:40

    Кстати по поводу всевозможных генераторов map area — на мой взгляд всех удобнее привычный Adobe Dreamweaver

Leave a Reply