Конструктор интерактивных картинок. Выделение объектов, метки на фото, настройка подсказок и ссылок

Что такое конструктор интерактивных картинок и зачем он нужен

Конструктор интерактивных картинок — это готовый модуль для 1С-Битрикс, который превращает обычное изображение в кликабельную схему с подсказками, ссылками и выделенными объектами. Вместо того чтобы размещать статичную фотографию товара или схему, вы получаете полноценный инструмент для навигации: посетитель может навести курсор на деталь, увидеть всплывающее окно с ценой или описанием, а затем перейти на нужную страницу. Это особенно полезно для интернет-магазинов, каталогов оборудования, архитектурных планов или образовательных материалов, где важно показать взаимосвязь элементов и сократить путь от просмотра к покупке.

Модуль работает прямо в публичной части сайта, легко настраивается через административную панель и не требует навыков программирования. Вы просто загружаете изображение, расставляете на нём активные зоны (шейпы) и привязываете к ним действия: показ тултипа, переход по ссылке или подсветку детали. Всё остальное — зум, адаптация под мобильные устройства, кеширование и совместимость с разными версиями Битрикс — уже заложено в код модуля.

Работа с объектами, метками и слоями: гибкость настройки

Главная особенность конструктора — возможность создавать на одном изображении множество интерактивных слоёв. Каждый слой может быть отдельным объектом: кругом, прямоугольником, многоугольником или текстовой областью. Вы сами выбираете, как он будет выглядеть — добавляете иконку, цветовую подсветку, рамку. В административной части есть удобный фильтр списка картинок, а при загрузке страницы активный слой подсвечивается с помощью якоря ссылки, что упрощает редактирование сложных проектов.

Для каждого слоя можно задать всплывающую подсказку (тултип) с произвольным содержимым: текстом, изображением, ценой со скидкой или даже элементом инфоблока. Если вы используете торговые предложения, модуль автоматически подтянет актуальную цену. Кроме того, с версии 1.1.0 появилась возможность скрывать или показывать слои в публичной части — это удобно, когда нужно пошагово раскрывать информацию или делать интерактивную инструкцию.

Тултипы, ссылки и элементы инфоблоков: автоматизация контента

Одна из сильных сторон модуля — генерация подсказок на основе шаблонов из инфоблоков. Вместо того чтобы вручную вводить данные для каждой метки, вы связываете слой с конкретным элементом каталога: название, описание, цена, картинка — всё подтягивается автоматически. Если вы измените данные в инфоблоке, тултип на картинке обновится без дополнительных действий. Это особенно ценно для интернет-магазинов с частым обновлением ассортимента или акций.

Также модуль позволяет прикрепить к слою ссылку — как внутреннюю, так и внешнюю. Посетитель кликает на деталь товара и сразу переходит на страницу с полным описанием или в корзину. А для вовлечения аудитории добавлены кнопки «Поделиться в социальных сетях» и «Мне нравится» — они работают прямо на изображении, не требуя перезагрузки страницы. В версии 1.5.2 разработчики улучшили работу компонента в публичной части, так что все эти элементы загружаются быстро и без задержек.

Совместимость, производительность и безопасность

Модуль регулярно обновляется и поддерживает актуальные версии 1С-Битрикс (вплоть до 25.х) и PHP (7.4, 8.4). Разработчики уделяют внимание совместимости: исправлены ошибки для IE11, налажена работа с jQuery 3, решены проблемы инициализации картинки, если блок со скрыт через display:none. Это значит, что интерактивные изображения корректно отображаются даже на страницах с вкладками или аккордеонами, где контент появляется только после действия пользователя.

Безопасность тоже не осталась без внимания — в версии 1.5.0 повышена защита модуля. Для администраторов добавлена возможность отключить информер СкайВеб24 в панели управления. А оптимизация анонимного режима (версия 1.4.8) ускоряет загрузку для неавторизованных посетителей. Крупные проекты оценят доработку отображения тултипов при большом объёме данных — подсказки не тормозят и не накладываются друг на друга.

Практические сценарии использования и вывод нескольких картинок

Модуль позволяет выводить несколько интерактивных картинок на одной странице — например, разные ракурсы товара или этапы процесса. Ошибки, возникавшие в ранних версиях при таком сценарии, исправлены. Также доступен зум изображения в публичной части: посетитель может увеличить фрагмент, чтобы рассмотреть мелкие детали. На мобильных устройствах поведение всплывающих подсказок адаптировано под тач-управление — они не мешают навигации и корректно реагируют на касания.

Для встраивания контента на внешние ресурсы предусмотрен iframe с настраиваемым размером. Если вы ведёте блог или размещаете карточки товаров на партнёрских сайтах, интерактивная картинка будет работать и там. А благодаря поддержке кеширования в компоненте и исправленной ошибке задержки загрузки (версия 1.4.2), посетители не увидят пустого места или долгой анимации — изображение появляется сразу. Всё это делает конструктор универсальным решением для тех, кто хочет сделать визуальный контент полезным и продающим.