Создавайте собственный интерактивный план помещений с расширением HTMLMaps — Расширения joomla

20.12.2017

Создавайте собственный интерактивный план помещений с расширением HTMLMaps - Расширения joomla

Кроме того, он также дает возможность выделять и отмечать отдельные участки, и если на один из них навести курсор, сразу же отобразится подсказка с описанием выделенной части объекта.

Особенности настроек расширения

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

Когда основная картинка готова, необходимо добавить нужные интерактивные элементы. Когда вы наведете на любую из них курсор, будут отображаться подсказки, а если кликнуть – должны открываться страницы. Чтобы это сделать, нужно:

В процессе настроек, в первую очередь, нужно как-то назвать ссылку, и выбрать, нужно ли указывать URL. Далее с помощью редактора вы самостоятельно пишите текст подсказки, и при желании также вставляете изображение.

Особенности работы с формой и координатами

Когда все сделано, нужно задать расширению фигуру рабочего объекта: прямоугольную или многоугольную, а также указать конкретные координаты в пикселях, которые определяться, в зависимости от изображения. Чтобы получить их, можно воспользоваться одним из обычных графических редакторов, к примеру, Фотошопом, в опциях которого есть возможность включить соответственную функцию.

Это общий план помещения, где все выполнено в серых тонах, однако, если на определенный участок навести курсор, но он изменит цвет, а также всплывет подсказка, как на следующем рисунке.

Главные преимущества расширения HTMLMaps

Нужно сказать, что здесь возможности практически ничем не ограничены. При желании, здесь есть возможность менять функционал, подсказки, а также подстраивать стиль под личные предпочтения.

Данный компонент поможет:

Данный компонент, в отличие, например, от CSS и DIV, не дает возможности накладывать картинка слоями, однако, в этом есть свои преимущества. Дело в том, что во время редактирования вам не придется каждый раз править огромное количество строк, и залезать в код. Вместо этого вы создаете план всего за несколько минут, а в случае необходимости редактирования, просто заходите в настройки, и исправляете нужный объект.

Читайте также:

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *