Выделение областей изображения с помощью maphilight.js
← Назад в записки веб-программиста
Выделение областей изображения с помощью maphilight.js
В этой заметке мы будем знакомиться с очень интересным на мой взгляд jquery-плагином maphilight.js. Наведите мышку на картинку, каждая комната помечается областью, выводится описание для каждой части квартиры: название, площадь, описание. Такой эффект можно использовать для выделения областей на географической карте, чертежных схемах и т.д.

Давайте разберемся, как это работает. Для реализации такой задачи нам потребуется jquery-плагин maphilight.js, библиотека jquery, необходимое изображение и ресурс, который позволит отметить области на изображении.
Подключаем необходимые библиотеки:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script type="text/javascript" src="/libs/maphilight.js"></script>
Добавляем стили для тултипа:
<style type="text/css"> .tool{ position: absolute; background: white; padding: 10px 20px; font-size: 14px; font-family: arial; z-index: 1010; box-shadow: 0px 0px 4px 0px rgb(70, 70, 70); -webkit-box-shadow: 0px 0px 4px 0px rgb(70, 70, 70); -moz-box-shadow: 0px 0px 4px 0px rgb(70, 70, 70); line-height: 21px; } .mapq{ background-size: cover; background-repeat: no-repeat!important; } </style>
Добавляем js-скрипты для обработки движений мыши и добавлении тултипа с описанием:
<script type="text/javascript"> function move(e,b,r) //для получения координат мышки { e = e || window.event if (e.pageX == null && e.clientX != null ) { var html = document.documentElement var body = document.body e.pageX = e.clientX + (html && html.scrollLeft || body && body.scrollLeft || 0) - (html.clientLeft || 0) e.pageY = e.clientY + (html && html.scrollTop || body && body.scrollTop || 0) - (html.clientTop || 0) } //устанавливаем тултип на уровне мышки $('.tool').css('left',e.pageX + 15 + r + 'px'); $('.tool').css('top',e.pageY + 15 - b + 'px'); } function out() { document.body.removeChild(tooltips); } var maparray = [ /* участки */ 'Зал;17;Для отдыха и гостей', 'Ванная;7;Гигиена', 'Рабочий кабинет;12;', 'Оранжерея;3;', 'Спальня;15;', 'Туалет;2;', 'Прихожая;12;', 'Балкон;3;' ]; $(document).ready(function(){ $('map area').hover(function(){ },function(){ $(".tool").remove(); }); }); function over(tip) //функция при наведении { //обрабатываем массив с данными data_color = ''; data = maparray[tip-1]; data = data.split(';'); name = data[0] square = data[1] desc = data[2] //добавляем тултип $('').appendTo('body').html(name+'
'+square+'кв.м.
'+desc); move(0,0,0); } </script>
Запускаем плагин:
<script type="text/javascript"> $(function() { jQuery('.mapq').maphilight(); }); </script>
Добавляем тег с искомым изображением:
<img src="/games/web-notes/images/flatplan1.jpg" width="980px" usemap="#genlinks" class="mapq" alt="" />
Отправляемся на сайт для выделения областей. Следуем инструкциям по скрину:

Копируем теги area без тега map. Добавляем в каждый тег area следующий атрибут со значением: "onmouseover='over($(this).index()+1)'" и помещаем его в тег: "" таким образом, чтобы код выглядел примено так:
<map name="genlinks" id="genlinks"> <area onmouseover="over($(this).index()+1)" shape="poly" alt="" title="" coords="138,160,90,586,478,584,474,398,404,354,366,352,372,158,364,154" href="" target="" /> <area onmouseover="over($(this).index()+1)" shape="poly" alt="балкон" title="" coords="381,157,377,238,431,234,430,156" href="" target="" /> <area onmouseover="over($(this).index()+1)" shape="poly" title="" coords="67,172,112,172,81,433,29,432,14,310,17,284" href="" target="" /> </map>
В итоге, если вы сделали все правильно, должна открыться картинка, при наведении на которую выделяются области.
В качестве бонуса еще один пример реализации областей: Котенок "ГАВ" и его части тела)
