Создавать 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 | Устанавливает уровень непрозрачности объекта |
blendTrans | Увеличивает или уменьшает контрастность отображения объекта |
blur | Создает эффект размытия изображения |
chroma | Делает прозрачными пикселы заданного цвета |
dropShadow | Рисует сплошной силуэт объекта, смещенный в заданном направлении, создавая тем самым эффект объекта, расположенного над страницей и отбрасывающего на нее тень |
flipH | Рисует объект в зеркальном отображении относительно горизонтальной плоскости |
rlipV | Рисует объект в зеркальном отображении относительно вертикальной плоскости |
glow | Добавляет свечение вдоль внешних границ объекта, создавая эффект "возгорания" границ объекта |
gray | Удаляет цветовую гамму объекта и отображает его в серых тонах |
invert | Меняет оттенок, насыщение и яркость объекта на противоположные |
light | Подсвечивает объект |
mask | Закрашивает прозрачные пикселы объекта заданным цветом и создает прозрачную маску из непрозрачных пикселов объекта |
redirect | Преобразует объект в объект DAImage, к которому можно применить все возможности технологии MS DirectAnimation |
revealTrans | Показывает или скрывает объекты, используя 23 определенных в фильтре перехода |
shadow | Рисует силуэт объекта вдоль одной из его границ в заданном направлении, создавая эффект тени |
wave | Синусоидальное искривление объекта в вертикальном направлении, создавая эффект волнообразной поверхности |
хrау | Изменяет глубину цвета объекта и после этого отображает его в черно-белых тонах, имитируя рентгеновский снимок объекта |
Рассмотрим некоторые из фильтров.
Фильтр alpha позволяет создавать эффекты прозрачности (невидимости) отображения или его части.
STYLE="filter: Alpha(Opacity=opacity, FinishOpacity=finishopacity, Style=style, StartX=startX, StartY=startY, FinishX=finishX, FinishY=finishY)"
Параметр | Назначение | Возможные значения |
Opacity | Уровень прозрачности | 0-100 0 - полная прозрачность (невидимость) изображения 100 - нормальное изображение. |
FinishOpacity
| Конечный уровень прозрачности
| 0-100, где 0 прозрачно, 100 непрозрачно |
Style | Определяет способ создания эффекта прозрачности Прозрачность точек, лежащих между границами объекта и этой кривой, меняется от значения, заданного свойством opacity, до значения, заданного свойством finishopacity. | 0 - изменение прозрачности всего изображения (по умолчанию) 1 – линия (от начальной точки до конечной) 2 - эллипс (из центра к эллипсу) 3 - прямоугольник (от центра до границ изображения) |
StartX | Координата X начала градиента |
|
StartY | Координата Y начала градиента |
|
FinishX | Координата X конца градиента |
|
FinishY | Координата Y конца градиента |
|
Фильтр создает впечатление движения путем размытия объекта в определенную сторону:
STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
Параметр | Назначение | Возможные значения |
Add | Добавляет размываемый объект к размытому | 0 – не добавляет 1 - добавляет |
Direction | направление размытия | 0 - 315 с шагом в 45 |
Strength | смещение | Целое значение, представляющее число пикселей «глубины» изображаемого объекта. Чем больше значение, тем мягче размытие |
Фильтр Wave делает объект волнистым.
STYLE="filter: Wave(Add=add, Freq=freq, LightStrength=strength, Phase=phase, Strength=strength)"
Параметр | Назначение | Возможные значения |
Add | значение, определяющее, добавлен ли первоначальный объект к фильтрованному объекту или нет | true, nonzero - добавлен false, zero – не добавлен |
Freq | число волн | целое значение |
LightStrength | сила волны в % | 0-100 |
Phase
| определяет угловое смещение волн | 0-100% (0 - 360 градусов) Н-р, 25% = 90 градусов |
Strength | интенсивность эффекта волны | целое значение |
Фильтр Invert реверсирует оттенок, насыщенность и яркость объекта, создавая эффект негатива.
STYLE="filter:Invert()"
GrayЭтот фильтр делает ваш объект черно-белым:
STYLE="filter:Gray()"
ChromaЭтот фильтр делает определенный цвет рисунка прозрачным: Что бы данный фильтр работал нормально необходимо, что бы выбранный цвет присутствовал в объекте.
STYLE="filter:Chroma(Color = color)"
Color - цвет, который должен будет стать прозрачным (Вы должны точно знать цвет).
Фильтр выделяет объект, как если бы вы его выделили мышью, при этом можно задать цвет выделения.
STYLE="filter:Mask(Color=color)"
Где Color - цвет используемый для выделения.
GlowФильтр добавляет сияние вокруг объекта.
STYLE="filter:Glow(Color=color, Strength=strength)"
Параметр | Назначение | Возможные значения |
Color | цвет самого сияния | #rrggbb hex |
Strength | сила сияния | 0-100 |
Фильтр shadow делает тень объекту.
STYLE="filter:Shadow(Color=color, Direction=direction)"
Параметр | Назначение | Возможные значения |
Color | определяет цвет тени | #rrggbb hex |
Direction | определяет направление тени. | 0-315 с шагом в 45 градусов |
Фильтр dropShadow добавляет силуэт объекта, смещенный в определенном направлении.
STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
Параметр | Назначение | Возможные значения |
Color | Цвет тени | #rrggbb hex |
OffX | Горизонтальное смещение тени |
|
OffY | Вертикальное смещение тени |
|
Positive | создает тень для видимых пикселей объекта | Любое целое значение '0' (false) - для невидимых пикселей. |
Фильтр переворачивает объект горизонтально.
STYLE="filter:FlipH()"
FlipVФильтр FlipV переворачивает объект вертикально.
STYLE="filter:FlipV"
xrayФильтр xray воздействует на объект как Х-луч.
STYLE="filter:Xray"
К элементу можно применить несколько фильтров одновременно. В этом случае они задаются в виде списка с пробелом в качестве разделителя:
Пример.gif" STYLE="filter: blur(strength=50) fliph()
ВАШ ТЕКСТ
Рассмотренные фильтры относят к технологии Dynamic (DHTML) – динамического HTML. С помощью этой технологии возможно создание различных мультимедийных эффектов. При этом используются не всегда безопасные команды. В целях обеспечения безопасности MS Internet Explorer блокирует все подобные команды.
Если вы уверены в безопасности выбирайте «Разрешить заблокированное содержимое»
ЗАДАНИЕ ДЛЯ САМОСТОЯТЕЛЬНОЙ РАБОТЫ
Используя полученные знания, создайте таблицу, показывающую действие всех 13 фильтров на текст и изображения.
Таблица должна иметь следующий вид
Фильтр | Параметр | Картинка | Текст |
alpha | Style=2 |
|
|
Style=3 |
|
|
Для фильтров, содержащих параметры, должно быть представлено не менее 3 значений для каждого из параметров.
9