Подсказки играют очень важную роль в веб дизайне. С их помощью можно существенно повысить уровень удобства использования интерфейса. В данном уроке мы сделаем интерактивную карту с подсказками, которые будут выводиться при наведении курсора мыши на специальную метку.
Идея
Хочется сделать интерактивное изображение с метками, при наведении на которые будут выводиться подсказки. При этом структура должна быть простой в использовании и обновлении информации. Чтобы добавление новой метки не требовало от пользователя каких либо дизайнерских навыков. Просто нужно будет добавить в код элемент 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.
Устанавливаем изображение (в элементе <div id="wrapper">) на котором надо выводить метку.
Добавляем содержание подсказки в элемент <div class="pin" data-xpos="450" data-ypos="110">
jQuery сделает все остальное:
На основании размеров изображения установит размеры контейнера.
Скроет оригинальное содержание подсказки (с помощью правил CSS) и добавит новый элемент.
Добавленная метка и подсказка будут позиционироваться в точке с координатами, заданными в атрибутах data.
Затем с помощью событий mouseenter и mouseleave подсказка будет выводиться и скрываться по необходимости.