Сплывающие надписи, ссылки и иконки на рисунках позволяют улучшить дизайн и навигацию сайта, сделав его более качественным и понятным к восприятию. Это делается с помощью стандартных html-тэгов map/area. С помощью этих тегов можно разбить изображение на части, которые будут иметь различные ссылки на отдельные страницы. Такое изображение называется картой изображений. Карта изображений состоит из изображения и набора координат, которые определяют активные области, что ссылаются (имеют ссылки) на различные назначения – внутренние или внешние (рис. 1). Например, на рисунку 1 показана карта изображений, на которой показано изображение карты Львовской области (Украина), которая содержит два три населенные пункта: Львов, Сходница и Славское. При наведении курсора на название населенного пункта, курсор стает кликабельным (ссылка ведет в соответствующий раздели или статью), а также появляется всплывающая подсказка, которая может быть текстовой или в виде изображения.

Конечно, неудобно редактировать html-код вручную, да и не каждый администратор сайта знает html-код. Поэтому для Joomla есть несколько компонентов, которые позволяют работать с map/area и таким образом создавать карты изображений.
Одним из таких компонентов есть компонент «HTML Map», который состоит из модуля и плагина. Модуль может изображать кликабельную карту изображений в модуле, а плагин позволяет встраивать карты изображений в статьи.

Будем считать, что Вы уже установили компонент «HTML Map» и настроили его.
Теперь приступим к созданию карты изображений на примере рисунка 1. Мы додадим новый населенный пункт «Трускавец» на изображение и поставим к нему кликабельную ссылку с сплывающей текстовой подсказкой.

Для этого сначала нужно открыть изображение (в нашем случае – карту Львовской области) в графическом редакторе (например Photoshop) и нарисовать объект на изображении. В нашем случае это желтый круг и надпись «Трускавец» (рис. 2).

Теперь в админ-панели заходим в «Медиа менеджер» (рис. 3) и выбираем папку, которая предназначена для изображений компонента «HTML Map» (рис. 4). Заметьте, что эту папку нужно перед этим создать, если ее не имеется. Теперь загружаем изображение в эту папку (рис. 5).

После загрузки изображений заходим в сам компонент «HTML Map», который находится в меню «Компоненты» (рис. 6). Сам компонент будет содержать список карт изображений, которые есть на сайте.

Если у нас еще не имеется карта изображений, то ее нужно создать, нажав на кнопку «Создать» (В появившемся окне нужно выбрать нужное изображение и папку. Также нужно указать заголовок, если он текстовый).
В нашем случае карта изображений уже существовала; мы только заменили самое изображение.

Теперь добавим ссылку к объекту изображения (рис. 6), который будет ограничен координатами. Для этого мы заходим в раздел ссылок карты изображений, кликнув на соответствующий элемент в столбце «Ссылки» (рис. 6). Здесь мы нажимаем кнопку «Создать», чтобы добавить ссылку «Трускавец». В редакторе ссылки мы выбираем необходимый пункт меню (или прописываем внешнюю ссылку), пишем заголовок (если он текстовый) и описание.

Теперь приходим к главному – заданию координат объекта на изображении. Координаты могут быть прямоугольными (Rectangular), круглыми (Circular) и кривыми (Polygonal). Внизу окна (рис. 8) нужно указать их тип напротив свойства «Select a shape», а сами координаты  через запятую вводятся в колонке «Coords». Для прямоугольной формы достаточно вести координаты верхнего и нижнего угла прямоугольника. Если объект имеет сложную форму, то нужно выбрать координаты типа Polygonal. После ввода координат нажимаем кнопку «Сохранить».

Сами координаты объекта на изображении удобно получить с помощью стандартного графического редактора Paint (рис. 2).
На рисунке 9 показано результат нашей работы.