1. Приветствую гостей и пользователей нашего форума! Первый раз вы у нас или же давно участвуете в жизни ресурса, хочу напомнить несколько моментов.

    1) Пользуемся поиском по форуму! Зачастую информация может находиться не по разделу!

    2) Раздел ИНФО-продуктов относительно новый, но имеем уже более 3000 высококлассных материалов (пользуемся сортировкой по прификсам).

    3) И самое важное, КАК КАЧАТЬ БЕЗ ОГРАНИЧЕНИЙ, вся информация находится по этой ссылке КУПИТЬ VIP

    4) Временная акция, получи +5 постов за вступление в нашу группу "Вконтакте" Более подробно ТУТ

    5) Веди активную жизнь на форуме и получай рубли на личный счёт!

    Скрыть объявление
  2. На нашем форуме Null-Prog действует серьёзное правило касательно размещения материалов!

    ДЛЯ РЕЛИЗЁРОВ: категорически запрещается выкладка материалов на файлообменники типа Deposit, letitbit и другие, требующие просмотров рекламы, обрезающие скорость и тд. Нарушителям, первые 2 раза предупреждения, далее БАН. Тему по этому поводу можно посмотреть ТУТ

    Скрыть объявление
  3. В тестовом режиме на нашем форуме открыт онлайн конструктор сайтов. Вы можете попробовать создать свой сайт у НАС, интуитивно понятный интерфейс, переведёт на 95%, быстрый экспорт проекта, от вас только перетаскивать элементы и вставить в них необходимый текст!

    Все вопросы ТУТ

    Скрыть объявление

  4. Скрыть объявление
  5. Уважаемые форумчане, открывается новый раздел форума, посвящённый ремонту и эксплуатации автомобилей. Просмотреть его можно ТУТ

    Так как раздел новый, информация будет пополнять каждый день. Если есть какие либо замечания по этому разделу, отписываемся в соответствующий раздел форума, либо в личку.

    Напоминаю, сообщения в разделе АВТО не учитываются, общение не ограничено.

    Скрыть объявление
  6. Объявляется набор Модераторов на различные раздел форума, свои заявки можно оставлять в ЭТОМ разделе, перед оставлением заявки рекомендуется ознакомиться с ПРАВИЛАМИ для модераторов.

Плагин HTMLMAPS - ИНТЕРАКТИВНЫЙ ПЛАН ПОМЕЩЕНИЙ

Тема в разделе "Плагины Joomla", создана пользователем Sam Jack, 10 июн 2015.

  1. Sam Jack

    Sam Jack Капитан-Узурпатор
    Команда форума Созидатель

    Регистрация:
    5 май 2015
    Сообщения:
    13.755
    Симпатии:
    4.728
    images-articles-nrg-extensions-htmlmaps-joomla-200x162.jpg
    Качественный бесплатный компонент достойный внимания — HTMLMaps. С помощью данного расширения вы легко сможете организовать интерактивную карту или план помещения, а также отметить и выделить на любом изображении различные участки, при этом когда пользователи сайта будут наводить курсор на нужный участок, у них будет отображатся подсказка с подробным описанием объекта.

    Настройки компонента очень просты и у вас не должно возникнуть каких либо проблем с созданием интерактивной карты. Для того чтобы создать новую карту, перейдите на главную страницу компонента, нажмите на кнопку — Создать (в правой верхней части экрана), после этого введите название помещения, выберите главную картинку (предварительно загрузив ее в папку /images/htmlmaps/), укажите папку для картинок которые будут выделены (папку нужно создать в том же каталоге, например:/images/htmlmaps/plan/) и при желании укажите CSS стили для всплывающей подсказки (Tooltip).

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

    Настройки интерактивной ссылки имеют интуитивно понятный интерфейс. Здесь вам необходимо задать название ссылки (в моем примере это план кухни), указать нужно ли присвоить данному объекту ссылку (можно указать абсолютно любой URL или выбрать из списка ссылку на любое меню сайта). В визуальном редакторе вам нужно написать текст подсказки и при желании разместить любое изображение. Здесь же в настройках вы можете выбрать размер окна подсказки в пикселях и добавить свои CSS стили для всплывающей подсказки (можно добавить стиль самого окна, стиль заголовка и стиль текста).
    htmlmaps_create.jpg
    Теперь перейдем к самому интересному. В настройках элемента ссылки вам нужно выбрать изображение которое будет отображатся при наведении курсора мышки, при клике и т.д.. Как вы видите на скриншоте выше, у меня базовое изображение плана помещения (вверху слева) имеет просто градации серого оттенка, остальные изображения (при наведении курсора...) я установил с выделенным планом помещения в фиолетовый цвет (предварительно выделил нужное место на плане в графическом редакторе и придал ему цвет).

    Хотелось бы заметить, что создание различных изображений с цветовыми формами совсем необязательно и можно использовать одно единственное изображение, и выделить просто подсказку в каждом отдельном элементе с помощью 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 раз?

     
    #1 Sam Jack, 10 июн 2015
    Последнее редактирование: 13 ноя 2015

Поделиться этой страницей

iHax Community
Рейтинг@Mail.ru Яндекс.Метрика мониторинг сайтов
Форум программного обеспечения/
Загрузка...