Вообще говоря, я бы так и продолжал делать редкие интерактивные карты на flash, но затем произошло кое-что интересное, после чего я снова взглянул на html как на средство создания эффектных интерактивных карт.
Всё бы было как раньше если бы в один день у своего знакомого на страничке в социальной сети не наткнулся на ссылку, которая вела на сайт про спортивные упражнения (вот этот сайт). На нём не было ничего особенного как с точки зрения сайтостроения, так и со спортивной, но меня очень позабавила интерактивная карта, с помощью которой была выполнена навигация. Наведение и клик на части тела спортсмена позволяли перейти на страницу с соответствующими упражнениями. И это ещё не всё! Наведение на элементы навигации тоже приводили к выделению определенных групп мышц.
Я быстро залез в код и стал смотреть на то, как это реализовано. В основе всего была библиотека jquery.maphilight. На сайте данной библиотеки имеется не только довольно простые примеры, но и даже большие карты (интерактивная карта США) которые раскрывают простоту и функционал данного решения.
На процесс получения координат вершин интерактивных областей эта библиотека не влияет — он как и раньше скучен как смерть, но вот что касается выделения фрагментов, цвета выделения, толщины границ и происходящих при этом эффектов — данная библиотека просто незаменима. Сразу оговорюсь, возможно есть и другие аналоги, но я их не встречал. Я сознательно не стану приводить код примеров — он есть на сайте библиотеки и в комментариях не нуждается.
P.S.
Если эта короткая статья покажется кому-либо интересной, то в своей второй статье на хабре я планирую подробно расписать процесс быстрого получения координат вершин для верстки подобных интерактивных карт.
Спасибо за внимание.
This entry passed through the Full-Text RSS service - if this is your content and you're reading it on someone else's site, please read the FAQ at http://ift.tt/jcXqJW.
Комментариев нет:
Отправить комментарий