Бесплатный модуль от студии Joomla Art - Image Hotspot создан для того, чтобы облегчить процесс расстановки меток и ссылок на изображениях. Никакой магии: эти же действия можно совершить и без использования модуля, обычными средствами CSS. Image Hotspot всего лишь позволяет сократить время, которое требуется для разметки одного изображения, предлагая готовые наборы значков и стилей. Процесс добавления меток и описаний к ним реализован в визуальном редакторе, и потому полностью исключено ручное редактирование кода. Всё, что требуется от вебмастера – выбрать и настроить тип маркера, а затем, в несколько кликов разместить его описание.
Основные возможности модуля
Модуль Image Hotspot значительно облегчает процесс создания презентационных материалов. С его помощью можно легко добавить интерактивное описание элементам изображения. Область применения – от статичных карт и схем с расположением офисов или других строений до описаний товаров в интернет-магазинах. Несмотря на относительно узкую специализацию, модуль обладает широким спектром возможностей:
- Использование в качестве маркеров иконок шрифта FontAwesome и собственных изображений;
- Настройка цвета маркера и всплывающего окна описания метки с поддержкой двух встроенных цветовых схем;
- Любое количество маркеров на изображении, с простой установкой их позиции на изображении перетаскиванием;
- Несколько типов описания: ссылки, социальные сети, текстовый фрагмент и видео с Youtube;
- Поддержка вывода изображений в описаниях маркеров с индивидуальным изменением размеров каждого блока.
Установка
Image Hotspot представляет собой обычный модуль Joomla, установка которого производится через менеджер расширений. Скачайте архив с расширением и загрузите его с помощью стандартного компонента установки Joomla.
Создание интерактивного изображения с метками
Для того чтобы разместить первое изображение, необходимо из панели администрирования перейти в менеджер модулей и выбрать JA Image Hotspot:
Стандартные параметры позволяют выбрать позицию для размещения модуля в шаблоне, а также привязку к пунктам меню.
А Вы знаете? Начиная с версии Joomla 3.5 доступен простой способ добавления модуля непосредственно в статью, с помощью специальной кнопки «Модуль». Также можно использовать расширение Modules Anywhere.
Основные настройки приведены на двух вкладках:
Global Configuration – позволяет вывести небольшое текстовое описание перед изображением, назначить тип анимации модуля (Fade, Popup) а также задать текст для всплывающей подсказки и установить режим показа описаний созданных маркеров (всегда открыты / открываются по щелчку мыши).
Marker Control. В этом разделе можно добавить изображение и произвольное количество различных маркеров к нему, настроить тип и цвет иконки, разместить описание, которое увидят пользователи в блоке, раскрывающемся при наведении указателя мыши. 
Связанный с каждой меткой, выпадающий блок может содержать текст, отдельное изображение и ссылки на социальные сети, можно даже разместить тематическое видео, указав ссылку на Youtube. Все элементы внутри всплывающего блока автоматически масштабируются под указанные параметры ширины и высоты, а если текста слишком много будет добавлена вертикальная прокрутка.
Результат расстановки маркеров – на скриншоте ниже.
Каждый из добавленных элементов содержит блок с описанием, который может включать ссылки на другие разделы и материалы сайта, что очень удобно для обзорных статей самого разного направления. Главное достоинство JA Image Hotspot в том, что этот простой и бесплатный модуль позволяет привлечь внимание пользователя уникальным контентом, предлагая интерактивное взаимодействие с привычным графическим оформлением. Это оригинальный и привлекательный способ в лаконичной форме донести до читателя свои идеи и предложения, задержать пользователя на странице, что в конечном итоге может положительно сказаться на позициях сайта в поиске, благодаря улучшению поведенческих факторов.
