Тематика: По цвету: Красный Желтый Зеленый Синий Оранжевый Розовый Серый Белый Черный Мульти

Ваш сайт на CMS Joomla? Добавьте его в галерею Joomfans!

Вы можете совершенно бесплатно добавить ваш веб-сайт в нашу галерею сайтов. Подробнее...

Галерея Добавить

Главная Статьи Блог Joomla 3.x, Bootstrap, Popovers и Tooltip - интерактивная карта с маркерами и подсказками
Joomla 3.x, Bootstrap, Popovers и Tooltip - интерактивная карта с маркерами и подсказками

Интерактивная карта с маркерами и подсказкамиВ последнее время пользователи нашего сайта спрашивают как можно использовать всплывающие подсказки поверх изображения, имитируя тем самым интерактивную картинку. Т.е. при наведении курсора мышки на определенные части картинки, должно появлятся всплывающее окно с какой либо информацией (например заголовок, картинка, текст и пр.). Если вы используете Joomla 1.5.x то это можно легко реализовать с помощью компонента HTMLMaps, но если используется Joomla 2.5 или Joomla 3.x, то возникает проблема с поиском расширения такого типа.

 

Для реализации такой идеи есть огромная масса способов и решений. В данной статье я опишу два простых варианта как можно сделать интерактивную картинку при этом используя минимум кода и стандартные средства Joomla. Я буду использовать подготовленную картинку используя css спрайты, немного HTML и CSS кода. HTML я применяю обычным DIV и UL списком.

 

Вариант №1: Joomla 3.x + Bootstrap + Popovers

Данные вариант подразумевает под собой использование фреймворка Bootstrap и его Popovers. Отлично будет работать на Joomla 3.x и шаблонах использующих Bootstrap.

 

Joomla 3.x + Bootstrap + Popovers

Для начала нам понадобится главная картинка, на которой уже будут проставлены маркеры в необходимых местах. Пример картинки вы можете скачать с нашего сервера. Данную картинку нужно поместить в папку images вашего шаблона.

 

Далее вам понадобится создать простой HTML модуль (Расширения => Менеджер модулей => Создать => HTML-код) и вставить туда код который указан ниже. Рекомендуем отключать визуальный редактор когда работаете с стандартным HTML модулем, т.к. он может обрезать части кода.

 

HTML код интерактивной карты и всплывающих подсказок с помощью Bootstrap Popovers и Joomla:

<div id="map-object">
<ul>
<li id="marker1">
<a href="#" rel="popover" data-placement="bottom" data-trigger="hover" data-content="<img src='images/1.jpeg' alt='название картинки' /> <span class='ttext'>Любой произвольный текст...</span> <span class='tprice'>950 руб. шт.</span>" data-original-title="Заголовок">Заголовок</a>
</li>
<li id="marker2">
<a href="#" rel="popover" data-placement="bottom" data-trigger="hover" data-content="<img src='images/2.jpeg' alt='Коньковая планка' /> <span class='ttext'>Любой произвольный текст...</span> <span class='tprice'>500 руб. шт.</span>" data-original-title="Заголовок">Заголовок</a>
</li>
<li id="marker3">
<a href="#" rel="popover" data-placement="left" data-trigger="hover" data-content="<img src='images/3.jpeg' alt='название картинки' /> <span class='ttext'>Любой произвольный текст...</span> <span class='tprice'>730 руб. шт.</span>" data-original-title="Заголовок">Заголовок</a>
</li>
</ul>
</div>

Далее вам нужно активировать работу Popovers. Для этого откройте главный файл шаблона (templates/ваш_шаблон/index.php или если используется какой либо фреймворк вставку кода нужно осуществлять в соответствии с вложением фреймворка) и вставьте данный код до тега </head>.

 

JS код активации Popovers:

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('[rel=popover]').popover();
});
</script>

После вставки HTML кода в HTML модуль и вставки JS кода в шаблон, вам нужно вставить CSS код в CSS файл шаблона. Откройте templates/ваш_шаблон/css/любой-подгружаемый-css-файл.css. Вставку кода рекомендую делать в самом низу страницы.

 

CSS код для Popovers (код который нужно изменять, прокомментирован):

#map-object{
background: url(../images/background-map.jpg) no-repeat; /* путь к бэкграунду */
position: relative;
width: 960px; /* ширина бэкграунда */
height: 591px; /* высота бэкграунда */
}
#map-object ul, #map-object li, #marker1 li, #marker2 li, #marker3 li{
margin: 0px;
padding: 0px;
list-style: none;
}
#marker1 a, #marker2 a, #marker3 a {
position: absolute;
width: 29px; /* ширина маркера */
height: 29px; /* высота маркера */
display: block;
text-indent: -10000px;
}
#marker1 a{
left: 359px; /* длина от левого края бэкграунда до начала маркера №1 */
top: 114px; /* длина от верхнего края бэкграунда до начала маркера №1 */
}
#marker2 a{
left: 576px; /* длина от левого края бэкграунда до начала маркера №2 */
top: 140px; /* длина от верхнего края бэкграунда до начала маркера №2 */
}
#marker3 a{
left: 838px; /* длина от левого края бэкграунда до начала маркера №3 */
top: 450px; /* длина от верхнего края бэкграунда до начала маркера №3 */
}
#marker1 a.linkcontent { /* данный класс предназначен для ссылки "Подробнее..." в том случае если вы используете Tooltip по клику, а не по наведению */
float: right;
position: inherit;
text-indent: 0px;
margin: -18px 50px;
}
span.ttext {
font-size: 14px; /* размер шрифта текста */
}
span.tprice {
display: block; /* переносим стоимость на новую строку */
font-size: 18px; /* размер шрифта стоимости */
color:#e5372f; /* цвет шрифта стоимости */
}

После того как вы все сделали, можете посмотреть результат у себя на сайте. Данный пример был проверен на стандартном шаблоне Protostar (Joomla 3.x) который поддерживает фреймворк Bootstrap. Если вы используете шаблон в котором нет поддержки Bootstrap, то предварительно подключите фреймворк к вашему шаблону.

 

В примере выше я проставил 3 маркера, которые работают, отображая информацию при наведении курсора мышки на иконку и при клике на эту иконку открывается нужная вам страница (URL прописывается в href="#"). Если вам необходимо сделать так чтобы всплывающая подсказка появлялась только при КЛИКЕ на иконку и оставалась на месте до обратного клика на иконку, то вам нужно удалить из HTML кода опцию data-trigger="hover". В итоге код должен выглядеть так:

<a href="#" rel="popover" data-placement="bottom" data-content="<img src='images/1.jpeg' alt='название картинки' /> <span class='ttext'>Любой произвольный текст...</span> <span class='tprice'>950 руб. шт.</span> <a class='linkcontent' href='#' title='Подробнее...'>Подробнее...</a>" data-original-title="Заголовок">Заголовок</a>

Как видите в данном примере выше я добавил еще ссылку "Подробнее" с классом linkcontent (например для перехода на поднобную информацию о маркере). Наглядный пример вы можете увидеть на видео в данной статье.

 

Хотелось бы также заметить что вы можете легко редактировать всплывающее окно, добавлять туда свои опции и прочую информацию. Например чтобы отобразить положение и стрелку всплывающего окна, вы можете использовать опцию data-placement="left" (в данном случае всплывающее окно будет отображатся слева от маркера, что очень удобно если размер страницы не позволяет показать окно справа). Более подробно о дополнительных настройках Popover вы можете узнать на официальном сайте — http://getbootstrap.com/javascript/#popovers

 

Вариант №2: Joomla 3.x + Tooltip

Второй вариант можно использовать на абсолютно всех версиях CMS: Joomla 1.5, Joomla 2.5 и на Joomla 3.x, т.к. мы будем использовать встроенный в CMS скрипт Tooltip. В примере ниже я делал интерактивную карту на Joomla 3.3 и стандартном шаблоне Beez3. Все делаем практически по тому же сценарию что и выше, за исключением некоторых строк кода.

 

Joomla 3.x + Tooltip

 

Для начала убедимся что в нашем шаблоне используется вызов всплывающих подсказок. Для этого откройте код страницы своего сайта (в браузере нажмите на правую кнопку и в контекстном меню выберите - исходный код страницы). В верхней части экрана ищем код подсказок, можно использовать поиск встроенный в браузере (введите в поиске слова JTooltips или hasTip). Если поиск найдет код вызова подсказок, то хорошо. В случае если на странице нет вызова кода подсказок, вам нужно добавить вызов кода в ваш шаблон (templates/ваш_шаблон/index.php или если используется какой либо фреймворк вставку кода нужно осуществлять в соответствии с вложением фреймворка): 

JHtml::_('behavior.tooltip');

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

 

Далее вам также нужно создать HTML модуль и вставить туда код, который указан ниже. (все делается также как я описывал в начале данной статьи).

 

HTML код интерактивной карты и всплывающих подсказок с помощью стандартной подсказки Tooltip Joomla:

<div id="map-object">
<ul>
<li id="marker1"><span class="hasTip" title="<span class='ttitle’>Заголовок</span> <img src='images/1.jpeg' alt=‘название картинки' /> <br/> <span class='ttext'>Любой произвольный текст...</span> <span class='tprice'>950 руб. шт.</span>" >
<a href="#">Заголовок</a></span>
</li>
<li id="marker2"><span class="hasTip" title="<span class='ttitle’>Заголовок</span> <img src=‘images/2.jpeg' alt=‘название картинки' /> <br/> <span class='ttext'>Любой произвольный текст...</span> <span class='tprice’>500 руб. шт.</span>" >
<a href="#">Заголовок</a></span>
</li>
<li id="marker3"><span class="hasTip" title="<span class='ttitle’>Заголовок</span> <img src=‘images/3.jpeg' alt=‘название картинки' /> <br/> <span class='ttext'>Любой произвольный текст...</span> <span class='tprice’>730 руб. шт.</span>" >
<a href="#">Заголовок</a></span>
</li>
</ul>
</div>

После вставки HTML кода, вам нужно вставить CSS код в CSS файл шаблона (делаем также как описывал в начале данной статьи)

 

CSS код для Tooltip (код который нужно изменять, прокомментирован):

#map-object{
background: url(../images/background-map.jpg) no-repeat; /* путь к бэкграунду */
position: relative;
width: 960px; /* ширина бэкграунда */
height: 591px; /* высота бэкграунда */
}
#map-object ul, #map-object li, #marker1 li, #marker2 li, #marker3 li {
margin: 0px;
padding: 0px;
list-style: none;
}
#marker1 a, #marker2 a, #marker3 a {
position: absolute;
width: 29px; /* ширина маркера */
height: 29px; /* высота маркера */
display: block;
text-indent: -10000px;
}
#marker1 a:hover, #marker2 a:hover, #marker3 a:hover {
background: none;
outline: none;
}
#marker1 a{
left: 359px; /* длина от левого края бэкграунда до начала маркера №1 */
top: 114px; /* длина от верхнего края бэкграунда до начала маркера №1 */
}
#marker2 a{
left: 576px; /* длина от левого края бэкграунда до начала маркера №2 */
top: 140px; /* длина от верхнего края бэкграунда до начала маркера №2 */
}
#marker3 a{
left: 838px; /* длина от левого края бэкграунда до начала маркера №3 */
top: 450px; /* длина от верхнего края бэкграунда до начала маркера №3 */
}
.tip {
float: left; /* выравниваем контент подсказки по левому краю */
background: #ffc; /* цвет заднего фона подсказки */
border: 1px solid #D4D5AA; /* добавляем границу */
padding: 5px;
max-width: 200px; /* максимальная ширина всплывающей подсказки */
}
span.ttitle {
font-size: 14px; /* размер шрифта заголовка */
}
span.ttext {
font-weight: normal; /* толщина шрифта текста */
}
span.tprice {
display: block; /* переносим стоимость на новую строку */
font-size: 16px; /* размер шрифта стоимости */
color:#e5372f; /* цвет шрифта стоимости */
}

Как видите в отличии от первого варианта с использованием Bootstrap, у нас добавились несколько новых CSS строк. В основном они предназначены для оформления нашего всплывающего окна.

 

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

 

Как мне найти координаты моего маркера?

Очень просто. Откройте картинку с маркерами в любом графическом редакторе или просмотрщике (в нашем примере это background-map.jpg) после чего измеряем растояние от левого края изображения до начала нужного маркера и также от верхнего края изображения до начала нужно маркера, после этого указываем в CSS координаты. Для примера ниже скриншот первого маркера. Как можно увидеть от левого края картинки он имеет растояние в 359px, а от верхнего 114px. Указываем такие координаты в CSS файле для каждого созданного маркера (#marker1, #marker2, #marker3, #marker4 .....).

 

Определение координат маркера (CSS спрайты)


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

Видео пример двух вариантов интерактивной картинки:

 

 

На этом в принципе все. HTML код у вас есть, CSS также имеется (постарался хорошо прокомментировать для более понятного восприятия). Остальное все зависит от вашего знания, умения и конечно же желания. Если возникли вопросы, пишите в комментариях или задавайте вопросы на нашем форуме. Если понравилась статья, будем признательны если поделитесь ей в социальных сетях.

 

Автор: Евгений Матюшенко. © Joomfans.com

Партнеры

 

Комментарии

+1romasa09.03.2015 18:49#1
Добрый день
а как сделать модуль
Чтобы выводил картинку и координаты
Цитировать
0asdasdasd19.03.2015 15:34#2
ничего не понятно, как потом эту карту на страницу сайта добавить
Цитировать
0joomfans19.03.2015 17:39#3
Цитирую romasa:
Добрый день
а как сделать модуль
Чтобы выводил картинку и координаты

Создаете обычный HTML модуль и вставляете туда код.
Цитирую asdasdasd:
ничего не понятно, как потом эту карту на страницу сайта добавить

Создаете либо обычный материал (статью) либо HTML модуль. Выключаете визуальный редактор и вставляете туда HTML код, который указан в статье. CSS и JS коды вставляете в файлы шаблона, как описано выше. После публикуете статью или модуль на странице сайта. Более ничего не требуется.
Цитировать
0asdasdasd19.03.2015 19:52#4
Цитирую joomfans:
Выключаете визуальный редактор и вставляете туда HTML код, который указан в статье.

вставляю html код, но при сохранении опять активным становится визуальный редактор и все теги в ковычках которые идут в
Цитировать
0joomfans19.03.2015 21:38#5
Цитирую asdasdasd:
Цитирую joomfans:
Выключаете визуальный редактор и вставляете туда HTML код, который указан в статье.

вставляю html код, но при сохранении опять активным становится визуальный редактор и все теги в ковычках которые идут в

Зайдите в настройки пользователя (в вашем случае администратор) и в опции "Редактор пользователя" измените TinyMCE (или JCE) на "Простой редактор HTML". После вставляйте код в статью и сохраняйте.
Цитировать
0Denisss27.03.2015 13:41#6
Как ни странно, делаю по второму варианту, все хорошо НО фото не подгружается в подсказке...
Цитировать
0F4you22.04.2015 10:24#7
Добрый день.
Пытался сделать все первым способом, на сырой CMS Joomla 3.x
Ничего не вышло, в чем причина так и не понял, может я чего-то не учел, может сделал что-то не так, ничего не отображается вообще, не поможете пошагово?
Цитировать
0F4you04.05.2015 08:07#8
Добрый день.
Все получилось сделать, но до сих пор не пойму как вы сделали такие иконки луп, у меня ничего вообще не выходит отобразить, ни иконки и поменять цвет блока.
Цитировать
0joomfans04.05.2015 12:10#9
Цитирую F4you:
Добрый день.
Все получилось сделать, но до сих пор не пойму как вы сделали такие иконки луп, у меня ничего вообще не выходит отобразить, ни иконки и поменять цвет блока.

Здравствуйте!
Иконки луп, расположены на самом изображении — http://joomfans.com/images/background-map.jpg, остальное уже прописывается в коде как показано выше.

Что именно у вас не получается?
Цитировать
0F4you04.05.2015 12:40#10
Цитирую joomfans:
Цитирую F4you:
Добрый день.
Все получилось сделать, но до сих пор не пойму как вы сделали такие иконки луп, у меня ничего вообще не выходит отобразить, ни иконки и поменять цвет блока.

Здравствуйте!
Иконки луп, расположены на самом изображении — http://joomfans.com/images/background-map.jpg, остальное уже прописывается в коде как показано выше.

Что именно у вас не получается?

У вас на картинке готовые иконки лупы, а можно ли как-нибудь привинтить уже их вместе белых квадратиков, много способов перепробовал, даже просто перекрасить квадратик, но ничего не выходит у меня.
Если у вас есть идеи или готовое решение, не могли бы поделиться им? подсказать куда в ваш код добавить и что?
Цитировать

Добавить комментарий


Защитный код


Литература

8 видеоуроков по…

На днях популярная и известная студия по разработке шаблонов и…

Joomla!…

Если вы часто создаете сайты на CMS Joomla! 1.6, 1.7 или 2.5 то вы…

10 легких шагов к…

Прочитав книгу Хагена Графа «10 легких шагов к освоению Joomla! 3.0»…

Joomla! 2.5 -…

Книга «Joomla! 2.5 - Руководство для начинающего пользователя»…

Инструменты

Akeeba SiteDiff

При создании сайта, всегда есть вероятность того что он будет взломан…

Morph Framework

Последняя обновленная и уже совершенно бесплатная версия фреймворка…

CodeLobster PHP…

Очень мощный и многофункциональный редактор РНР, HTML, CSS,…

JB Zen Grid Framework…

Последняя обновленная версия фреймворка Zen Grid от студии…