Карта с подсветкой при наведении на область maphilight jQuery

В достаточно оригинальных сайтах требуется подсветка области при наведении на элемент. Это можно было бы сделать и с помощью обычной ссылки, при этом меняя фон активной области. Но что, если нам нужно навести мышь на круг или объект сложной формы?

В этом случае надо использовать плагин maphilight.ja на jQuery, который работает совместно с тегами map и area.

Для работы с плагином, достаточно его подключить вместе с jQuery библиотекой и вспомнить математику, а именно раздел с координатами. Где мы рисуем фигуры за счет абсцисс (X) и ординат (Y). Первой является всегда X, а затем идет Y. Но не все так сложно, как кажется.

Сначала создадим картинку и привяжем к ней "карту":

<script type="text/javascript"> $(function() { $('.map').maphilight(); }); </script>

<div class="map" style="background: url(demo_simple.png); display: block; position: relative; padding: 0px; width: 420px; height: 300px; ">
<img src="demo_simple.png" width="420" height="300" class="map maphilighted" usemap="#simple">
</div>

<map name="simple">
<area href="/" shape="poly" coords="47,62, 106,61, 134,72, 135,118, 30,116" >
<area href="/" shape="poly" coords="32,157, 133,157, 127,192, 127,211, 28,211" data-maphilight="{&quot;strokeColor&quot;:&quot;ffffff&quot;,&quot;strokeWidth&quot;:8,&quot;fillColor&quot;:&quot;6AA8FE&quot;,&quot;fillOpacity&quot;:0.9}" >
</map>

Важно, чтобы у всех были одинаковые размеры (картинка demo_simple.png и фон в классе .map). Картинка с атрибутом usemap должна быть связана с тегом <map name="simple"> (в данном случае по значению simple).

За счет этого, куда бы не перемещали главный div (class="map"), все точки и картинка останется на месте.

Также вы видите два area тега, которые в атрибуте coords рисуют координаты фигуры. Во втором area в data-maphilight задаются дополнительные параметры для фигуры.

На каждый элемент area можно задавать: ссылки id title alt и параметры (все пишется в одну строку):
data-maphilight="
{
&quot;strokeColor&quot;:&quot;0000ff&quot;, - Цвет обводки (ставить в 6 символов)
&quot;strokeWidth&quot;:5, - Ширина обводки
&quot;fillColor&quot;:&quot;ff0000&quot;, - Цвет заливки (ставить в 6 символов)
&quot;fillOpacity&quot;:0.6, - Прозрачность заливки
&quot;stroke&quot;:false, - Без обводки
&quot;alwaysOn&quot;:true - Подсвечивать область всегда
}"

Вот таким не хитрым способом и создаются интерактивные карты на сайтах. Лично я использовал данный скрипт, чтобы подсвечивать территории районов города при наведении мыши, а также планы домов и их этажей. Скрипт достаточно успешно справился со своей задачей.