Синтаксис

filter: progid:DXImageTransform.Microsoft.Фильтр(свойства)

Фильтры

Alpha Настраивает прозрачность объекта.

Blur Размывает содержимое.

BasicImage Устанавливает параметры цвета, поворота изображения или прозрачности.

Chroma Показывает определенные цвета прозрачными.

DropShadow Отображает тень.

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

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

Glow Добавляет свечение вокруг краев.

gray Фильтр gray удаляет цветовую гамму объекта и отображает его в серых тонах.

 invert Фильтр invert меняет оттенок, насыщение и яркость объекта на противоположные.

Light Создает эффект лучей света.

 mask Фильтр mask отображает текст так, как будто он выделен мышью. 

Shadow Добавляет тень.

Xray Фильтр xray отображает объект в черно-белом варианте, как на рентгеновском снимке

Wave Вносит волнообразные искажения.

34. Фильтры: определение, назначение. Динамические фильтры (для преобразования изображений фильтры: revealtrns и blendtrans). Синтаксис, параметры, типы переходов и номера превращений. Примеры.

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

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

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

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

Таблица 1. Элементы, к которым применяются фильтры
Элемент	Фильтр применяется…
BODY	… всегда.
BUTTON	… всегда.
DIV	… если заданы ширина (width), высота (height) или элемент абсолютно позиционирован.
IMG	… всегда.
INPUT	… всегда.
MARQUEE	… всегда.
SPAN	… если заданы ширина (width), высота (height) или элемент абсолютно позиционирован.
TABLE	… всегда.
TD	… всегда.
TEXTAREA	… всегда.
TH	… всегда.

    Чтобы применить фильтр к элементу достаточно задать значения свойства filter.

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

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

<IMG SRC="1.gif" STYLE="filter: blur(strength=50) fliph()">

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

    Прежде чем рассматривать конкретные переходы, перечислим некоторые свойства-параметры, которые присущи всем динамическим фильтрам:

• Duration - определяет интервал времени, за который совершается переход. Его значением является действительное число с плавающей точкой в формате секунды.миллисекунды. В сценариях его можно изменять, если только не началось выполнение перехода;

• Status - доступно только из сценария и возвращает состояние выполнения преобразования: 0 - если преобразование было остановлено; 1 - если оно было применено; 2 - если преобразование выполняется;

• Enabled - разрешение применения фильтра. true (по умолчанию) - разрешает применить фильтр; false - не разрешает;

• Percent - задает процент выполнения преобразования. Может принимать значения от 0 (преобразование еще не началось) до 100 (преобразование закончено).

    Ко всем переходам можно также применять следующие методы:

• Apply() - замораживает элемент страницы, после чего вы можете изменять параметры элемента. Для того чтобы запустить преобразование, используйте метод Play();

• Play(<продолжительность>) - запускает преобразование. Необязательный параметр продолжительностьопределяет время в секундах, в течение которого выполняется этот метод;

• Stop() - немедленно останавливает преобразование.

 Фильтр blendTrans задает постепенное исчезновение или появление изображения, увеличивая или уменьшая степень его прозрачности. Следующий пример демонстрирует постепенное исчезновение одной картинки и появления другой.

• <HTML>

• <HEAD>

• <TITLE>Фильтр blendTrans</TITLE>

• <SCRIPT LANGUAGE="JavaScript">

• <!--

• function f()

• {

• img.filters.blendTrans.Apply();

• img.src="ris.bmp";

• img.filters.blendTrans.Play();

• }

• //-->

• </SCRIPT>

• </HEAD>

• <BODY>

• <IMG ID="img" SRC="handshak.bmp" STYLE="filter:blendTrans(Duration=8);"

• ONCLICK="f()">

• </BODY>

• </HTML>

•     Приведенный пример в действии можно увидеть на рисунке 1.

по рисунку)

    В этом примере к изображению img применяется переход blendTrans, который постепенно в течение 8 секунд делает прозрачным изображение файла handshak.bmp, а вместо него отображается содержимое файла ris.bmp. Инициализация перехода осуществляется щелчком мыши на изображении.

    В процедуре обработки щелчка мыши вызывается метод Apply(), после которого можно устанавливать новые значения параметров объекта img. В примере задается новый файл изображения.

    Еще раз напомним, что три метода переходов предназначены для управления выполнением перехода из сценария. Метод Apply() "замораживает" видимое в данный момент изображение элемента и позволяет изменить значения параметров перехода и самого элемента, не требуя немедленного применения перехода. Чтобы выполнить переход после переустановки значений необходимых параметров, следует использовать метод Play(). Остановить выполнение перехода для элемента в любой момент времени можно методом Stop().

 Фильтр revealTrans позволяет, в отличие от перехода blendTrans, выполнить переходы из одного видимого состояния в другое разнообразными способами. Его свойство Transition может иметь целое значение, которое определяет тип перехода. Допустимые значения представлены в таблице 1.

Таблица 1. Значения свойства Transition
Переход	Отображение объекта
0	Сжимающийся прямоугольник
1	Расширяющийся прямоугольник
2	Сжимающийся круг
3	Расширяющийся круг
4	Разворачивание снизу вверх
5	Разворачивание сверху вниз
6	Разворачивание слева направо
7	Разворачивание справа налево
8	Вертикальные жалюзи
9	Горизонтальные жалюзи
10	В шахматном порядке поперек
11	В шахматном порядке вниз
12	Пиксели отображаются в случайном порядке
13	Одновременно слева и справа к центру
14	Одновременно от центра налево и направо
15	Одновременно снизу и сверху к центру
16	Одновременно от центра вверх и вниз
17	От правого верхнего угла к левому нижнему
18	От правого нижнего угла к левому верхнему
19	От левого верхнего угла к правому нижнему
20	От левого нижнего угла к правому верхнему
21	Случайными горизонтальными линиями
22	Случайными вертикальными линиями
23	Отображение пикселей случайным образом

    На рисунке 1 показан результат применения перехода revealTrans со значением параметра Transition=1 вместо перехода blendTrans в примере предыдущего шага. В этом случае новый рисунок прорисовывается в течение 8 секунд расширяющимся из центра прямоугольником.