Интерактивная карта с всплывающими подсказками
Подсказки играют очень важную роль в веб дизайне. С их помощью можно существенно повысить уровень удобства использования интерфейса. В данном уроке мы сделаем интерактивную карту с подсказками, которые будут выводиться при наведении курсора мыши на специальную метку.
Идея
Хочется сделать интерактивное изображение с метками, при наведении на которые будут выводиться подсказки. При этом структура должна быть простой в использовании и обновлении информации. Чтобы добавление новой метки не требовало от пользователя каких либо дизайнерских навыков. Просто нужно будет добавить в код элемент 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
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
Сейчас только тот является менеджером, кто заставляет знания работать. |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.