Интерактивная карта с всплывающими подсказками

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

 

Идея

Хочется сделать интерактивное изображение с метками, при наведении на которые будут выводиться подсказки. При этом структура должна быть простой в использовании и обновлении информации. Чтобы добавление новой метки не требовало от пользователя каких либо дизайнерских навыков. Просто нужно будет добавить в код  элемент div с содержанием подсказки и установить для него атрибуты HTML5 data для позиционирования.

 

Атрибуты HTML5 data и jQuery

HTML5 имеет отличный инструмент - пользовательские атрибуты data, который позволяет хранить произвольный набор метаданных. Данный атрибут позволяет избежать использования атрибутов rel или title для различных задач в Javascript.

Синтаксис атрибута data имеет вид:

<div data-foo="bar"></div>

А в jQuery получить значение можно следующим образом:

var test = $('div').data('foo');

В данном уроке атрибут data будет использоваться для хранения координат метки.

 

HTML

<div id="wrapper">

   <img width="920" height="450" src="/world-map.jpg" alt="Карта мира">
   
   <div class="pin pin-down" data-xpos="170" data-ypos="100">	  
	  <h2>Северная Америка</h2>	  
	  <ul>
		<li><b>Площадь (кв.км):</b> 24,490,000</li>
		<li><b>Население:</b> 528,720,588</li>

	  </ul>
   </div>  
   
</div>
  • #wrapper – данный элемент является контейнером для всех остальных элементов.
  • img –изображение, которое будет служить фоном.
  • .pin – абсолютно позиционируемый элемент, который содержит метку и содержание подсказки, которое будет выводиться обработчиком события. Класс pin-down определяет тип метки.
  • data-xpos="450" data-ypos="110" – атрибут HTML5 data, который хранит координаты X (по горизонтали) и Y (по вертикали) в px для позиционирования метки. В данном примере метка будет располагаться на 450px от левой стороны изображения и на 110px сверху.

 

CSS

Код CSS достаточно простой и очевидный:

		/* Относительное позиционирование */
		#wrapper {
			position: relative;
			margin: 50px auto 20px auto;
			border: 1px solid #fafafa;
			-moz-box-shadow: 0 3px 3px rgba(0,0,0,.5);
			-webkit-box-shadow: 0 3px 3px rgba(0,0,0,.5);
			box-shadow: 0 3px 3px rgba(0,0,0,.5);
		}
		
		/* Скрываем оригинальное содержание подсказки */
		.pin {
			display: none;
		}
		
		/* Стили для подсказкии и метки */
		.tooltip-up, .tooltip-down {
			position: absolute;
			background: url(arrow-up-down.png);
			width: 36px;
			height: 52px;
		}
		
		.tooltip-down {
			background-position: 0 -52px;
		}
		
		.tooltip {
			display: none;
			width: 200px;
			cursor: help;
			text-shadow: 0 1px 0 #fff;
			position: absolute;
			top: 10px;
			left: 50%;
			z-index: 999;
			margin-left: -115px;
			padding:15px;
			color: #222;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			border-radius: 5px;
			-moz-box-shadow: 0 3px 0 rgba(0,0,0,.7);
			-webkit-box-shadow: 0 3px 0 rgba(0,0,0,.7);
			box-shadow: 0 3px 0 rgba(0,0,0,.7);
			background: #fff1d3;
			background: -webkit-gradient(linear, left top, left bottom, from(#fff1d3), to(#ffdb90));
			background: -webkit-linear-gradient(top, #fff1d3, #ffdb90);
			background: -moz-linear-gradient(top, #fff1d3, #ffdb90);
			background: -ms-linear-gradient(top, #fff1d3, #ffdb90);
			background: -o-linear-gradient(top, #fff1d3, #ffdb90);
			background: linear-gradient(top, #fff1d3, #ffdb90);			
		}
		
		.tooltip::after {
			content: '';
			position: absolute;
			top: -10px;
			left: 50%;
			margin-left: -10px;
			border-bottom: 10px solid #fff1d3;
			border-left: 10px solid transparent;
			border-right :10px solid transparent;
		}
		
		.tooltip-down .tooltip {
			bottom: 12px;
			top: auto;
		}
		
		.tooltip-down .tooltip::after {
			bottom: -10px;
			top: auto;
			border-bottom: 0;
			border-top: 10px solid #ffdb90;
		}
		
		.tooltip h2 {
			font: bold 1.3em 'Trebuchet MS', Tahoma, Arial;
			margin: 0 0 10px;
		}
		
		.tooltip ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}

 

jQuery

		$(document).ready(function(){
		
			// Устанавливаем ширину и высоту контейнера в соответствии с размерами изображения
			$('#wrapper').css({'width':$('#wrapper img').width(),
							  'height':$('#wrapper img').height()
			})
			
			//Направление символа подсказки
			var tooltipDirection;
						 
			for (i=0; i<$(".pin").length; i++)
			{				
				// Устанавливаем направление символа подсказки - вверх или вниз
				if ($(".pin").eq(i).hasClass('pin-down')) {
					tooltipDirection = 'tooltip-down';
				} else {
					tooltipDirection = 'tooltip-up';
					}
			
				// Добавляем подсказку
				$("#wrapper").append("<div style='left:"+$(".pin").eq(i).data('xpos')+"px;top:"+$(".pin").eq(i).data('ypos')+"px' class='" + tooltipDirection +"'>\
													<div class='tooltip'>" + $(".pin").eq(i).html() + "</div>\
											</div>");
			}    
			
			// Выводим/скрываем подсказку
			$('.tooltip-up, .tooltip-down').mouseenter(function(){
						$(this).children('.tooltip').fadeIn(100);
					}).mouseleave(function(){
						$(this).children('.tooltip').fadeOut(100);
					})
		});

 

 

Как это работает

Данный пример работает даже в старых браузерах. Конечно, в таком варианте теряются градиенты и тени CSS3.

  1. Устанавливаем изображение (в элементе <div id="wrapper">) на котором надо выводить метку.
  2. Добавляем содержание подсказки  в элемент <div class="pin" data-xpos="450" data-ypos="110">
  3. jQuery сделает все остальное:
    • На основании размеров изображения установит размеры контейнера.
    • Скроет оригинальное содержание подсказки (с помощью правил CSS) и добавит новый элемент.
    • Добавленная метка и подсказка будут позиционироваться в точке с координатами, заданными в атрибутах data.
    • Затем с помощью событий mouseenter и mouseleave подсказка будет выводиться и скрываться по необходимости.

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/yUEq1dTN7gs/lessons.php

Статьи по теме

Дайджест новых статей по интернет-маркетингу на ваш email

Интерактивная карта с всплывающими подсказками | | 2012-06-19 12:01:29 | | Статьи Web-мастеру | | Подсказки играют очень важную роль в веб дизайне. С их помощью можно существенно повысить уровень удобства использования интерфейса. В данном уроке мы сделаем интерактивную карту с подсказками, | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться статьей: