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

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

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

Важно! Основное изображение загружается в папку /images/htmlmaps/. Кроме этого папка для создания выделенных картинок создается в том же каталоге. Это может быть, к примеру, /images/htmlmaps/plan/. Если хотите, можно также указать соответственный CSS стиль, который поможет с подсказками.

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

• выбрать карту из имеющегося списка
• нажать на специальную иконку ссылок вместе с ее элементами
• создать свою ссылку, с помощью которой интерактивность добавится уже в ваше помещение

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

А Вы Знаете? Создавать и вставлять разные картинки с цветовым оформлением совершенно не обязательно. Для этого достаточно взять всего лишь одну картинку, и просто выделить подсказку в отдельных элементах.

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

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

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

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

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

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

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

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