[Из песочницы] Подсветка интерактивных карт с помощью jquery.maphilight.js
В работе с html мне довольно редко приходилось делать интерактивные карты — если и возникала такая необходимость, то для этого я использовал flash, благодаря которому можно было добиться плавных эффектов смены цветов при наведении курсора на элементы карты. При этом html мог предложить только тэги и , которые, в свою очередь, уже и определяли активные области изображений. Однако, размечать эти области, определяя координаты вершин — не было самым приятным моментом, учитывая, что создании каких-либо эффектов требовало ещё больших усилий.
Вообще говоря, я бы так и продолжал делать редкие интерактивные карты на flash, но затем произошло кое-что интересное, после чего я снова взглянул на html как на средство создания эффектных интерактивных карт.
Всё бы было как раньше если бы в один день у своего знакомого на страничке в социальной сети не наткнулся на ссылку, которая вела на сайт про спортивные упражнения (вот этот сайт). На нём не было ничего особенного как с точки зрения сайтостроения, так и со спортивной, но меня очень позабавила интерактивная карта, с помощью которой была выполнена навигация. Наведение и клик на части тела спортсмена позволяли перейти на страницу с соответствующими упражнениями. И это ещё не всё! Наведение на элементы навигации тоже приводили к выделению определенных групп мышц.
Я быстро залез в код и стал смотреть на то, как это реализовано. В основе всего была библиотека jquery.maphilight. На сайте данной библиотеки имеется не только довольно простые примеры, но и даже большие карты (интерактивная карта США) которые раскрывают простоту и функционал данного решения.
На процесс получения координат вершин интерактивных областей эта библиотека не влияет — он как и раньше скучен как смерть, но вот что касается выделения фрагментов, цвета выделения, толщины границ и происходящих при этом эффектов — данная библиотека просто незаменима. Сразу оговорюсь, возможно есть и другие аналоги, но я их не встречал. Я сознательно не стану приводить код примеров — он есть на сайте библиотеки и в комментариях не нуждается.
P.S.
Если эта короткая статья покажется кому-либо интересной, то в своей второй статье на хабре я планирую подробно расписать процесс быстрого получения координат вершин для верстки подобных интерактивных карт.
Спасибо за внимание.
