Интерактивная карта с всплывающими подсказками
Подсказки играют очень важную роль в веб дизайне. С их помощью можно существенно повысить уровень удобства использования интерфейса. В данном уроке мы сделаем интерактивную карту с подсказками, которые будут выводиться при наведении курсора мыши на специальную метку.
Идея
Хочется сделать интерактивное изображение с метками, при наведении на которые будут выводиться подсказки. При этом структура должна быть простой в использовании и обновлении информации. Чтобы добавление новой метки не требовало от пользователя каких либо дизайнерских навыков. Просто нужно будет добавить в код элемент 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"
– атрибут HTML5data
, который хранит координаты 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
подсказка будет выводиться и скрываться по необходимости.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/yUEq1dTN7gs/lessons.php


Поделиться статьей:
Акция: Закажи любой сайт до окончания акции и получи скидку + подбор семантического ядра + поисковую оптимизацию сайта Это позволит Вам получать еще больше трафика и соответственно клиентов из Интернета!
До конца акции осталось
0
5
4
3
2
1
0
0
9
8
7
6
5
4
3
2
1
0
0
5
4
3
2
1
0
0
9
8
7
6
5
4
3
2
1
0
0
9
8
7
6
5
4
3
2
1
0
0
9
8
7
6
5
4
3
2
1
0
|
Узнайте подробности акции у менеджеров компании по телефонам: 8-924-200-7194 г.Хабаровск 8-800-550-9899 Бесплатно по России (с 3 до 11 по Мск) |
Новые статьи и публикации
- 2018-04-19 » Алгоритмы Google: всё, что о них нужно знать
- 2018-04-17 » Выпуск №102: Формирование семантического ядра для рекламной кампании. Редизайн и SEO. Все о доменных именах. Промоакции в Google AdWords. Сайты для гос.учреждений.
- 2018-04-11 » Формирование семантического ядра для рекламной кампании
- 2018-04-03 » Редизайн при сохранении позиций: рекомендации по SEO
- 2018-03-27 » Картинки на сайте: как правильно работать с атрибутами Alt и Title
- 2018-03-22 » Выпуск №101: Правильный контент для интернет-магазина. Партизанский маркетинг и Продвижение в Youtube.
- 2018-03-21 » Доменные имена: всё, что о них нужно знать
- 2018-03-16 » Как ранжироваться в топе YouTube: практические советы
- 2018-03-14 » Расширение «Промоакция»: новое предложение Google AdWords
- 2018-03-12 » Конструкторы для сайтов: простые и эффективные решения
- 2018-03-04 » Сайты для муниципальных образований и бюджетных учреждений
- 2018-03-02 » Продвижение сайта: цена вопроса
- 2018-02-22 » Переход сайта на протокол https
- 2018-02-22 » SSL сертификаты - Защита передаваемых данных и доверие пользователей
- 2018-02-19 » Партизанский маркетинг: особенности и преимущества
- 2018-02-14 » Правильный контент для интернет-магазина − увеличение продаж в два раза
- 2018-02-14 » Выпуск №100: Особенности турбо-страниц и немного про то, как превратить текст в видео.
- 2018-02-08 » В Директе появятся видеодополнения по умолчанию
- 2018-02-06 » Особенности турбо-страниц
- 2018-01-31 » Научитесь составлять цепляющие заголовки по методике 4U за 5 минут!
- 2018-01-26 » Рекламные методы продвижения бизнеса
- 2018-01-17 » Выпуск №99: Способы продвижения бизнеса в интернете и мифы о создании сайтов
- 2018-01-17 » Способы продвижения бизнеса в интернете
- 2018-01-11 » Продвижение бизнеса в интернете
- 2017-12-30 » Выпуск №98: SEO-продвижение: итоги-2017, прогнозы-2018
- 2017-12-27 » Как развить бизнес в интернете?
- 2017-12-27 » Четыре рекламных объявления в спецразмещении
- 2017-12-20 » Развитие бизнеса в сети интернет
- 2017-12-18 » Принципы размещения контекстной рекламы в РСЯ и КМС
- 2017-12-15 » Бэкап сайта
Предоставляем полный комплекс услуг по созданию, обслуживанию и продвижению сайтов по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.