Интерактивные фрагменты

Назначить фрагментам интерактивность можно двумя способами:

· простая интерактивность;

· для создания более сложной интерактивности используется панель «behaviors» (Варианты поведения) (Рисунок 8).

Рисунок 8 – Панель «behaviors» (Варианты поведения)

Создание простой интерактивности

Простая интерактивность достигается созданием ролловера методом перетаскивания.

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

При выделении фрагмента в его центре появляется окружность с перекрестием в центре. Она называется маркером поведения (Рисунок 9).

Рисунок 9 – Маркер поведения

Перетаскивая маркер поведения с фрагмента-активатора на целевой фрагмент, можно легко создать эффект ролловера или замены изображения. При этом активатор может быть одновременно и целевым фрагментом.

Лекционное занятие 2 – «Ролловеры»

План лекции:

1. Ролловеры

2. Создание простого ролловера

Ролловеры

Ролловер - элемент пользовательского интерфейса, а точнее — событие, изменяющее состояние графического объекта в зависимости от того, расположен ли над ним указатель мыши.

Все ролловеры работают одинаково: при прохождении указателя мыши над одним рисунком активируется отображение другого рисунка. В качестве триггера всегда выступает web-объект (фрагмент, активная область или кнопка).

Простейший ролловер заменяет изображение в состоянии 1 (Рисунок 10) на изображение в состоянии 2 (Рисунок 11), находящееся непосредственно под первым изображением. Вы также можете создавать более сложные ролловеры.

Рисунок 10 – Ролловер в состоянии 1

Рисунок 11 – Ролловер в состоянии 2

Ролловеры замены изображения могут заменять изображения в любом состоянии.

Раздельные ролловеры заменяют изображения из фрагмента, не являющегося активатором.

Если выделить web-объект-активатор, созданный с помощью маркера поведения или панели «behaviors»(Варианты поведения), то отобразятся все связи поведения объекта (Рисунок 12).

Рисунок 12 – Связи объекта на панели «behaviors» (Варианты поведения)

По умолчанию синяя линия поведения представляет взаимодействие ролловера (Рисунок 13).

Рисунок 13 – Линия поведения