Тематика: По цвету: Красный Желтый Зеленый Синий Оранжевый Розовый Серый Белый Черный Мульти

Ваш сайт на CMS Joomla? Добавьте его в галерею Joomfans!

Вы можете совершенно бесплатно добавить ваш веб-сайт в нашу галерею сайтов. Подробнее...

Галерея Добавить

Главная Компоненты HTMLMaps - интерактивный план помещений
HTMLMaps - интерактивный план помещений
1 1 1 1 Версия: 1.2.2
HTMLMaps - интерактивный план помещений
Качественный бесплатный компонент достойный внимания — HTMLMaps. С помощью данного расширения вы легко сможете организовать интерактивную карту или план помещения, а также отметить и выделить на любом изображении различные участки, при этом когда пользователи сайта будут наводить курсор на нужный участок, у них будет отображатся подсказка с подробным описанием объекта. 
 
Настройки компонента очень просты и у вас не должно возникнуть каких либо проблем с созданием интерактивной карты. Для того чтобы создать новую карту, перейдите на главную страницу компонента, нажмите на кнопку — Создать (в правой верхней части экрана), после этого введите название помещения, выберите главную картинку (предварительно загрузив ее в папку /images/htmlmaps/), укажите папку для картинок которые будут выделены (папку нужно создать в том же каталоге, например: /images/htmlmaps/plan/) и при желании укажите CSS стили для всплывающей подсказки (Tooltip).
 
После того как вы создадите основную карту помещения, вам нужно добавить в нее все интерактивные элементы, которые при наведении курсора мышки должны отображать подсказки и при клике открывать какую либо страницу. Для этого выберите в списке нужную карту и нажмите на иконку ссылок с элементами. После создайте свою первую ссылку которая добавит интерактивности вашему плану помещения.
 
Настройки интерактивной ссылки имеют интуитивно понятный интерфейс. Здесь вам необходимо задать название ссылки (в моем примере это план кухни), указать нужно ли присвоить данному объекту ссылку (можно указать абсолютно любой URL или выбрать из списка ссылку на любое меню сайта). В визуальном редакторе вам нужно написать текст подсказки и при желании разместить любое изображение. Здесь же в настройках вы можете выбрать размер окна подсказки в пикселях и добавить свои CSS стили для всплывающей подсказки (можно добавить стиль самого окна, стиль заголовка и стиль текста). 
 
Создание интерактивной карты и плана в Joomla
Создание новой интерактивной метки на плане помещения
 
Теперь перейдем к самому интересному. В настройках элемента ссылки вам нужно выбрать изображение которое будет отображатся при наведении курсора мышки, при клике и т.д.. Как вы видите на скриншоте выше, у меня базовое изображение плана помещения (вверху слева) имеет просто градации серого оттенка, остальные изображения (при наведении курсора...) я установил с выделенным планом помещения в фиолетовый цвет (предварительно выделил нужное место на плане в графическом редакторе и придал ему цвет).
 
Хотелось бы заметить, что создание различных изображений с цветовыми формами совсем необязательно и можно использовать одно единственное изображение, и выделить просто подсказку в каждом отдельном элементе с помощью CSS . Выше я просто описал и показал вам максимальные возможности компонента с замещением изображения, например, если вы хотите применить градации серого и при наведении выделять какое либо одно помещение или если вы хотите заменить изображение при наведении вообще другой картинкой (к примеру подробным вторым планом помещения на который наведен курсор).
 
Далее вам необходимо определится с фигурой помещения прямоугольник, круг или многоугольник, после чего указать координаты нужного помещения в пикселях. В моем случае я использовал режим прямоугольника с координатами 159,91,310,214. Попытаюсь немного расшифровать данные координаты:
 
  • 159 это X ширина от левого края изображения
  • 91 это Y высота от верхнего края изображения
  • 310 это X1 ширина от левого края изображения
  • 214 это Y1 высота от верхнего края изображения 
 
В моем примере это просто прямоугольник, который максимально подходит под параметры помещения и при наведении курсора мышки на план этого помещения, всплывает подсказка.
 
Для примера если вы хотите использовать режим круга, то у вас должны быть такие координаты:
 
  • 30,30,15 — X, Y, R (30 пикселей слева, 30 пикселей справа, 15 пикселей диаметр круга)
 
Если вы хотите использовать многоугольник, то должны быть указаны примерно такие координаты:
 
  • 130, 130, 130, 130, 31, 89 — X0, Y0, X1, Y1, Xn, Yn (координаты определяются исходя от вашего изображения)
 
Получить координаты изображения можно в графическом редакторе. Например я использовал редактор Adobe Photoshop и его стандартную линейку, в опциях которой включил отображение координат в пикселях.
 
Ниже показаны пример работы компонента, на основе моего примера. При просмотре общего плана помещения он выглядит в градациях серого, при наведении на нужный участок плана помещения изменяется его цвет и появляется всплывающая подсказка при клике на которую откроется указанный в настройках URL (например на подробное описание этого помещения).
 
Общий план помещения без наведения курсора мышки на комнаты
Общий план помещения без наведения курсора мышки на комнаты 
 
План помещения при наведении курсора мышки на определенный участок
План помещения при наведении курсора мышки на определенный участок
 

Возможности компонента HTMLMaps:

  • Неограниченное создание интерактивных карт помещения или любого другого объекта
  • Неограниченное создание интерактивных меток (при наведении курсора) на каждой карте
  • Поддержка Joomla 1.5
  • Имеет модуль для отображение плана помещений
  • Имеет плагин для вставки плана помещения в любую статью сайта
  • Имеется возможность присвоить карту помещения к любому меню
  • Можно изменять CSS всплывающей подсказки непосредственно в настройках каждого объекта
  • Можно вставлять в подсказки свои заголовки, изображения и текст
  • Имеется возможность присвоить метке свою URL ссылку или открыть любое меню сайта.
  • В архиве с компонентом присутствует подробная инструкция по использованию (на английском языке)
 
Возможности компонента в принципе не ограничены. Вы можете при желании добавить свой функционал или кардинально изменить стиль и вывод подсказки. К примеру если вы используйте шаблон Joomla, с поддержкой Bootstrap, то можете сделать вывод не стандартной подсказкой Joomla (Tooltip) а сделать вывод подсказки из фреймворка Bootstrap или вообще вместо подсказки Tooltip, использовать Popover.
 
Конечно можно не использовать компонент HTMLMaps а использовать DIV, CSS и пр. и накладывать изображения слоями. Но тогда вам при каждом редактировании плана помещения придется лезть в код, править массу строк и т.д. Благодаря компоненту HTMLMaps, интерактивный план помещения в Joomla, можно сделать буквально за несколько минут. При необходимости редактировании информации о плане помещения, вам просто нужно зайти в настройки и в визуальном редакторе исправить нужный объект. Согласитесь, проще в 100 раз?

Партнеры

Загрузка

Похожие новости

SocioFeed 1.3 Premium

Довольно мощный премиальный RSS…

GameServers Joomla!

GAMESERVERS JOOMLA! Компонент Joomla!…

RokQuickCart v1.3

Последняя версия компонента корзины,…

JoomListings v2.1.5…

Последняя финальная версия компонента…

JomSocial v1.8.8

Последняя версия (от 24 августа 2010)…

ZOO 2.0 RC2

Последний апдейт версии известного…
 

Комментарии

0cyberoam firewall07.01.2015 02:44#1
thanks
Цитировать
0Johnn Dorfman07.05.2015 09:25#2
Спасибо, заценил!
Цитировать
0KruS29.06.2015 13:55#3
2015 год и Joomla 1.5???
Может я чего-то не понял?
Цитировать
0joomfans18.08.2015 11:21#4
Цитирую KruS:
Может я чего-то не понял?

Все правильно. Не поняли. Было опубликовано по просьбе на форуме.
Цитировать
0Дети хоронят коня31.08.2015 15:46#5
Цитирую KruS:
2015 год и Joomla 1.5???
Может я чего-то не понял?

Действительно, многие сидят т.к. перенести крупный сайт без глюков на новую задача порой невыполнимая
Цитировать

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


Защитный код


Литература

8 видеоуроков по…

На днях популярная и известная студия по разработке шаблонов и…

Joomla!…

Если вы часто создаете сайты на CMS Joomla! 1.6, 1.7 или 2.5 то вы…

10 легких шагов к…

Прочитав книгу Хагена Графа «10 легких шагов к освоению Joomla! 3.0»…

Joomla! 2.5 -…

Книга «Joomla! 2.5 - Руководство для начинающего пользователя»…

Инструменты

Akeeba SiteDiff

При создании сайта, всегда есть вероятность того что он будет взломан…

Morph Framework

Последняя обновленная и уже совершенно бесплатная версия фреймворка…

CodeLobster PHP…

Очень мощный и многофункциональный редактор РНР, HTML, CSS,…

JB Zen Grid Framework…

Последняя обновленная версия фреймворка Zen Grid от студии…