Подсветка интерактивных карт с помощью jquery.maphilight.js

В работе с html мне довольно редко приходилось делать интерактивные карты — если и возникала такая необходимость, то для этого я использовал flash, благодаря которому можно было добиться плавных эффектов смены цветов при наведении курсора на элементы карты. При этом html мог предложить только тэги и , которые, в свою очередь, уже и определяли активные области изображений. Однако, размечать эти области, определяя координаты вершин — не было самым приятным моментом, учитывая, что создании каких-либо эффектов требовало ещё больших усилий.

Вообще говоря, я бы так и продолжал делать редкие интерактивные карты на flash, но затем произошло кое-что интересное, после чего я снова взглянул на html как на средство создания эффектных интерактивных карт.

Всё бы было как раньше если бы в один день у своего знакомого на страничке в социальной сети не наткнулся на ссылку, которая вела на сайт про спортивные упражнения (вот этот сайт ^[1]). На нём не было ничего особенного как с точки зрения сайтостроения, так и со спортивной, но меня очень позабавила интерактивная карта, с помощью которой была выполнена навигация. Наведение и клик на части тела спортсмена позволяли перейти на страницу с соответствующими упражнениями. И это ещё не всё! Наведение на элементы навигации тоже приводили к выделению определенных групп мышц.

Я быстро залез в код и стал смотреть на то, как это реализовано. В основе всего была библиотека jquery.maphilight ^[2]. На сайте данной библиотеки имеется не только довольно простые примеры ^[3], но и даже большие карты (интерактивная карта США ^[4]) которые раскрывают простоту и функционал данного решения.

На процесс получения координат вершин интерактивных областей эта библиотека не влияет — он как и раньше скучен как смерть, но вот что касается выделения фрагментов, цвета выделения, толщины границ и происходящих при этом эффектов — данная библиотека просто незаменима. Сразу оговорюсь, возможно есть и другие аналоги, но я их не встречал. Я сознательно не стану приводить код примеров — он есть на сайте библиотеки и в комментариях не нуждается.

P.S.
Если эта короткая статья покажется кому-либо интересной, то в своей второй статье на хабре я планирую подробно расписать процесс быстрого получения координат вершин для верстки подобных интерактивных карт.

Спасибо за внимание.

Автор: moonvader

Источник ^[5]