В последнее время пользователи нашего сайта спрашивают как можно использовать всплывающие подсказки поверх изображения, имитируя тем самым интерактивную картинку. Т.е. при наведении курсора мышки на определенные части картинки, должно появлятся всплывающее окно с какой либо информацией (например заголовок, картинка, текст и пр.). Если вы используете 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.

Для начала нам понадобится главная картинка, на которой уже будут проставлены маркеры в необходимых местах. Пример картинки вы можете скачать с нашего сервера. Данную картинку нужно поместить в папку 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. Все делаем практически по тому же сценарию что и выше, за исключением некоторых строк кода.

Для начала убедимся что в нашем шаблоне используется вызов всплывающих подсказок. Для этого откройте код страницы своего сайта (в браузере нажмите на правую кнопку и в контекстном меню выберите - исходный код страницы). В верхней части экрана ищем код подсказок, можно использовать поиск встроенный в браузере (введите в поиске слова 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 .....).

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

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

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

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