📜 ⬆️ ⬇️

Highlight interactive maps using jquery.maphilight.js

image I rarely had to make interactive maps in working with html - if there was such a need, then for this I used flash, thanks to which one could achieve smooth effects of changing colors when pointing the cursor on map elements. In this case, html could offer only tags and, which, in turn, already defined the active areas of images. However, marking up these areas, determining the coordinates of the vertices, was not the most pleasant moment, given that creating any effects required even more effort.

Generally speaking, I would continue to make rare interactive maps on flash, but then something interesting happened, after which I again looked at html as a means of creating spectacular interactive maps.

Everything would be as before if one day my friend on a page on the social network did not come across a link that led to the site about sports exercises ( this site ). There was nothing special about it both from the point of view of site building and with sports, but I was very amused by the interactive map with which the navigation was performed. Guidance and click on the body parts of the athlete allowed to go to the page with the appropriate exercises. And that is not all! Guidance on the navigation elements also led to the release of certain muscle groups.
')
I quickly climbed into the code and began to look at how it was implemented. At the core of all was the jquery.maphilight library. The website of this library contains not only fairly simple examples , but even large maps ( an interactive map of the USA ) that reveal the simplicity and functionality of this solution.

This library does not affect the process of obtaining the coordinates of the vertices of interactive areas - it is as boring as death as before, but as for the selection of fragments, the color of the selection, the thickness of the borders and the effects that occur, this library is simply irreplaceable. Immediately make a reservation, maybe there are other analogues, but I have not met them. I will deliberately not give the code of examples - it is on the library website and does not need comments.

PS
If this short article seems interesting to anyone, then in my second article on Habré, I plan to describe in detail the process of quickly obtaining the coordinates of vertices for the layout of such interactive maps.

Thanks for attention.

Source: https://habr.com/ru/post/274145/


All Articles