Highlighting interactive maps using jquery.maphilight.js

In working with html, I rarely had to make interactive maps - if such a need arose, I used flash for this, thanks to which it was possible to achieve smooth effects of color changes when you hover over map elements. At the same time, html could offer only tags and, which, in turn, already determined the active areas of images. However, marking these areas by 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 have been as before if one day my friend on a page on a social network didn’t come across a link that led to a site about sports exercises ( this site ). There was nothing special on it, either from the point of view of site building or from sports, but I was very amused by the interactive map with which the navigation was performed. Pointing and clicking on parts of the athlete’s body made it possible to go to the page with the corresponding exercises. And that is not all! Guidance on navigation elements also led to the allocation of certain muscle groups.

I quickly got into the code and began to look at how this was implemented. At the heart of everything was the jquery.maphilight library . The site of this library has not only fairly simple examples., but also even large maps ( 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 the interactive areas - it is still boring as death, but as regards the selection of fragments, the color of the selection, the thickness of the borders and the effects that occur in this case, this library is simply irreplaceable. I’ll make a reservation right away, maybe there are other analogues, but I have not met them. I will not deliberately 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 the hub I plan to describe in detail the process of quickly obtaining vertex coordinates for the layout of such interactive maps.

Thanks for attention.