Обучающая практическая работа "Поддержка визуальных и мультимедийных эффектов при отображении страниц"

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

Фильтр — это некоторый алгоритм, преобразующий визуальное отображение элемента в окне браузера. Он может быть статическим или динамическим.

Статический фильтр преобразует элемент, и после этого он отображается.

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

Фильтры применяются не ко всем HTML-элементам, а только к тем, которые могут определять прямоугольный блок при отображении в окне браузера и не являются окнами, как, например, элемент IFRAME. Это BODY, BUTTON, TEXTAREA, INPUT, IMG, TABLE, TD, ТН, MARQUEE. Если заданы ширина (свойство width), высота (свойство height) или элемент абсолютно позиционирован, то применим и к DIV и SPAN.

Фильтры не применяются к следующим элементам HTML-страницы: апплеты Java, IFRAME, SELECT, OPTION, P, EM, STRONG и ко всем заголовкам H1, H2 и т. д.

Применить фильтр к элементу просто: достаточно задать значение его свойства filter, следуя правилам задания свойств стилей.

filter: значение.

Каждый фильтр, как отмечалось выше, реализует определенный алгоритм преобразования видимого отображения элемента, поэтому значение свойства filter задается в форме функции:

filter: имя_фильтра([параметры]);

а параметры фильтра, если они присутствуют, задаются с использованием синтаксиса именованных параметров функции:

имя_параметра = значение_параметра

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

Итак, основной синтаксис применения фильтров:

 STYLE="filter:ИМЯ_ФИЛЬТРА(ПАРАМЕТР1, ПАРАМЕТР2...)"

Параметры для каждого фильтра определяются свои собственные они описаны далее.

В Internet Explorer реализовано большое число разнообразных фильтров. В табл.1 представлены все фильтры с кратким описанием их воздействия на визуализацию элементов.

Таблица 1. Доступные в Internet Explorer фильтры

Рассмотрим некоторые из фильтров.

Фильтр alpha позволяет создавать эффекты прозрачности (невидимости) отображения или его части.

STYLE="filter: Alpha(Opacity=opacity, FinishOpacity=finishopacity, Style=style, StartX=startX, StartY=startY, FinishX=finishX, FinishY=finishY)"

Фильтр создает впечатление движения путем размытия объекта в определенную сторону:

STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"

Фильтр  Wave  делает объект волнистым.

 STYLE="filter: Wave(Add=add, Freq=freq, LightStrength=strength, Phase=phase, Strength=strength)"

Фильтр  Invert  реверсирует оттенок, насыщенность и яркость объекта, создавая эффект негатива.

 STYLE="filter:Invert()"

Этот фильтр делает ваш объект черно-белым:

 STYLE="filter:Gray()"

Этот фильтр делает определенный цвет рисунка прозрачным: Что бы данный фильтр работал нормально необходимо, что бы выбранный цвет присутствовал в объекте.

STYLE="filter:Chroma(Color = color)"

Color - цвет, который должен будет стать прозрачным (Вы должны точно знать цвет).

Фильтр  выделяет объект, как если бы вы его выделили мышью, при этом можно задать цвет выделения.

 STYLE="filter:Mask(Color=color)"

Где  Color - цвет используемый для выделения.

Фильтр   добавляет сияние вокруг объекта.

 STYLE="filter:Glow(Color=color, Strength=strength)"

Фильтр  shadow  делает тень объекту.

STYLE="filter:Shadow(Color=color, Direction=direction)" 

Фильтр  dropShadow добавляет силуэт объекта, смещенный в определенном направлении.

 STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"

Фильтр переворачивает объект горизонтально.

 STYLE="filter:FlipH()"

Фильтр FlipV  переворачивает объект вертикально.

 STYLE="filter:FlipV"

Фильтр  xray  воздействует на объект как Х-луч.

 STYLE="filter:Xray"

К элементу можно применить несколько фильтров одновременно. В этом случае они задаются в виде списка с пробелом в качестве разделителя:

Пример.gif" STYLE="filter: blur(strength=50) fliph()

ВАШ ТЕКСТ

Рассмотренные фильтры относят к технологии Dynamic (DHTML) – динамического HTML. С помощью этой технологии возможно создание различных мультимедийных эффектов. При этом используются не всегда безопасные команды. В целях обеспечения безопасности MS Internet Explorer блокирует все подобные команды.

Если вы уверены в безопасности выбирайте «Разрешить заблокированное содержимое»

ЗАДАНИЕ ДЛЯ САМОСТОЯТЕЛЬНОЙ РАБОТЫ

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

• Таблица должна иметь следующий вид

• Для фильтров, содержащих параметры, должно быть представлено не менее 3 значений для каждого из параметров.

9