Этот бесплатный компонент, разработанный специально для Joomla 3.x, предоставляет возможность создавать собственный план или карту объекта любой сложности.
Кроме того, он также дает возможность выделять и отмечать отдельные участки, и если на один из них навести курсор, сразу же отобразится подсказка с описанием выделенной части объекта.
Особенности настроек расширения
Настройки не вызовут никаких проблем, поскольку здесь все доступно и логично. Для того чтобы организовать свою карту, необходимо сначала перейти на главную часть расширения, и нажать на клавишу «создать» (она находится в правом верхнем углу монитора). Далее вводится название рабочего объекта, а также выбирается главная картинка.
Важно! Основное изображение загружается в папку /images/htmlmaps/. Кроме этого папка для создания выделенных картинок создается в том же каталоге. Это может быть, к примеру, /images/htmlmaps/plan/. Если хотите, можно также указать соответственный CSS стиль, который поможет с подсказками.
Когда основная картинка готова, необходимо добавить нужные интерактивные элементы. Когда вы наведете на любую из них курсор, будут отображаться подсказки, а если кликнуть – должны открываться страницы. Чтобы это сделать, нужно:
- выбрать карту из имеющегося списка
- нажать на специальную иконку ссылок вместе с ее элементами
- создать свою ссылку, с помощью которой интерактивность добавится уже в ваше помещение
В процессе настроек, в первую очередь, нужно как-то назвать ссылку, и выбрать, нужно ли указывать URL. Далее с помощью редактора вы самостоятельно пишите текст подсказки, и при желании также вставляете изображение.
А Вы Знаете? Создавать и вставлять разные картинки с цветовым оформлением совершенно не обязательно. Для этого достаточно взять всего лишь одну картинку, и просто выделить подсказку в отдельных элементах.
Особенности работы с формой и координатами
Когда все сделано, нужно задать расширению фигуру рабочего объекта: прямоугольную или многоугольную, а также указать конкретные координаты в пикселях, которые определяться, в зависимости от изображения. Чтобы получить их, можно воспользоваться одним из обычных графических редакторов, к примеру, Фотошопом, в опциях которого есть возможность включить соответственную функцию.
Это общий план помещения, где все выполнено в серых тонах, однако, если на определенный участок навести курсор, но он изменит цвет, а также всплывет подсказка, как на следующем рисунке.
Главные преимущества расширения HTMLMaps
Нужно сказать, что здесь возможности практически ничем не ограничены. При желании, здесь есть возможность менять функционал, подсказки, а также подстраивать стиль под личные предпочтения.
Данный компонент поможет:
- создавать интерактивные карты объектов любой сложности
- видоизменять стили подсказок для каждого объекта, используя настройки
- в каждую подсказку добавлять собственные картинки и заголовки
- присваивать карту рабочего помещения к нужному меню
- вставлять результат, в какой угодно текст, имеющийся на сайте
Данный компонент, в отличие, например, от CSS и DIV, не дает возможности накладывать картинка слоями, однако, в этом есть свои преимущества. Дело в том, что во время редактирования вам не придется каждый раз править огромное количество строк, и залезать в код. Вместо этого вы создаете план всего за несколько минут, а в случае необходимости редактирования, просто заходите в настройки, и исправляете нужный объект.