Выделение областей изображения с помощью maphilight.js

maphilight.jsплагинвыделение областейтултипjsjquery

В этой заметке мы будем знакомиться с очень интересным на мой взгляд 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>
				

В итоге, если вы сделали все правильно, должна открыться картинка, при наведении на которую выделяются области.

 

В качестве бонуса еще один пример реализации областей: Котенок "ГАВ" и его части тела)