Рисунок 1.

Ранее в статье был рассмотрен способ создания ролловер-эффекта. Его суть заключалась в том чтобы изменять состояние двери с закрытого на открытую при наведении курсора. В этой статье рассматривается этот же эффект только сделан он немного по-другому. Состояние объекта будет изменяться по нажатию на активную зону (хотспот). Стоит отметить, что экспортировать созданный проект нужно будет в формат HTML5.

Создадим проект и выберем панораму с объектами (в моем случае входная дверь), для которых будет создан ролловер-эффект, находятся в закрытом состоянии (Рис. 1).

Из другой панорамы, с объектами в открытом состоянии с помощью инструмента Корректор извлечем корректировку в формате PNG или JPEG. Запомните значения параметров Pan, Tilt и FoV, с которыми извлекалась корректировка.

Рисунок 2.

Откроем редактор медиа (Рис. 3) и добавим изображение корректировки.

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

Рисунок 3.

После добавления изображения установим нужные значения параметров Pan, Tilt и FoV, которые запоминали ранее.

Рисунок 4.

В шаблоне оформления создадим точечную активную зону (Рис. 5), с которой будут связаны изображения кнопок, отражающих состояние двери, которое будет установлено после нажатия на кнопку. Присвоим ей идентификатор "hs_door".

Рисунок 5.

Для смены видимости создадим 2 метода Mouse Click (Рис. 6), в которых вызывается действие Toggle Element Visibility для обоих изображений. При нажатии на хотспот видимый элемент будет становиться не видимым, а не видимый – видимым. Чтобы переключение работало корректно, отключим свойство Visible для элемента "state_closed".

Рисунок 6.

Сохраним шаблон и откроем редактор активных зон. Нажмем дважды левой кнопкой мыши в области панорамы и переместим созданную активную зону в место, где должна быть созданная в оформлении кнопка переключения. В поле Skin-ID введем идентификатор шаблона активной зоны в оформлении – "hs_door" (Рис. 7).

Рисунок 7.

Перейдем к экспорту в HTML5. Настройки экспорта можете установить на свое усмотрение. Главное подключить HTML-файл, с которым будем работать на следующем этапе.

После завершения экспорта откроем в текстовом редакторе HTML-файл и внесем несколько изменений:

1. В секции <style> добавим два CSS-селектора с классами ".elemhidden" и ".elemvisible".

 .elemhidden { opacity: 0 }
 .elemvisible { opacity: 1 } 

2. Javascript

<script>
 document.addEventListener('DOMContentLoaded', function() {
 var elmedia = document.getElementsByClassName('ggmedia');
 for (var i=0; i<elmedia.length; i++){
 if (elmedia[i].tagName.toLowerCase() == 'img') {
 elmedia[i].setAttribute('id','media' + i);
 elmedia[i].style.setProperty('transition', 'opacity 500ms linear');
 elmedia[i].classList.add('elemhidden');
 }
 }
 });
</script>

Этот скрипт находит все элементы с классом "ggmedia" и, если, этот элемент изображение (тег <img>), добавляет к нему класс "elemhidden" и свойство CSS transition для плавности перехода.

В результате должно получится следующее:

Рисунок 8.

Сохраним файл, и затем откроем в текстовом редакторе файл skin.js. В начало добавим функцию, которая будет переключать состояние видимости изображений.

function toggleImage(id){
 elm=document.getElementById(id);
 if (elm.classList.contains('elemhidden')) {
 elm.classList.remove('elemhidden');
 elm.classList.add('elemvisible');
 } else 
 {
 elm.classList.remove('elemvisible');
 elm.classList.add('elemhidden'); 
 }
}

Рисунок 9.

Находим объявление функции SkinHotspotClass.

Рисунок 10.

Несколько строк ниже находится описание элемента "hs_door".

Рисунок 10.

Чуть ниже будет объявление события onclick. Сразу после открывающейся фигурной скобки напишем вызов функции toggleImage(), передав в качестве параметра "media0".

Рисунок 11.

Все готово. Можно открывать просмотр панорамы.

Если нужно создать ролловер-эффект для нескольких объектов (например, для всех дверей в комнате), то необходимо для каждого объекта создавать свой шаблон активной зоны. Возможно, понадобится доработка скрипта, чтобы при его выполнении не затрагивались внедренные изображения, которые не добавлялись для создания ролловер-эффекта. Стоит отметить, что иногда наложение изображения происходит не всегда идеально, появляется различие в 1-2 пикселя.