Фильтры и транзиции

Фильтры и транзиции могут быть применены только в IE версии 4 и выше. Синтаксис очень прост:

filter:filtername(parameters) ,где filter - свойство таблицы стилей,

и не ко всем элементам, а только к:

BODY
BUTTON
DIV (с установленной длиной, шириной или позиционированый с атрибутом absolute)
IMG
INPUT
MARQUEE
SPAN (с установленной длиной, шириной или позиционированый с атрибутом absolute)
TABLE
TD
TEXTAREA
TFOOT
TH
THEAD
TR

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

Многие фильтры имеют параметры (некоторые из них - необязательны), некоторые - не имеют, хотя у всех фильтров (а также транзиций) с помощью скриптов можно установить общее свойство enabled в true или false:

<img id=image1 src="sample.jpg" style="filter:blur(strength=50) flipv()">

<SCRIPT>
image1.filters[1].enabled = false;
</SCRIPT>

Транзиции имеют к тому же общее свойство duration

STYLE="FILTER: transitiontype(duration=duration, transition=transitionshape)"
где
duration - продолжительность эффекта в сек.мсек (9.050);
transitionshape - целое число от 0 до 23, определяющее рамки эффекта.

Одновременно может быть применено несколько фильтров, как в следующем неочевидном примере:

<img id=sample src="sample.jpg" style="filter:blur(strength=50) flipv()">

Синтаксис:

<img id=sample src=sample.jpg style="filter:alpha(opacity=20)">

Набор filters объекта позволяет изменить то или иное свойство обьекта посредством JScript

theDiv.filters.item(0).enabled = true;,
то есть здесь мы делаем доступным первый фильтр объекта с ID theDiv, и обращаться к фильтрам можно несколькими способами:

<img id=sample src="sample.jpg" style="filter: alpha(opacity=50) fliph(enabled=0) blur(amount=10); position: relative">
<script language="JavaScript">
function foo()
{
sample.filters.alpha sample.filters["alpha"] sample.filters[0]
}
</SCRIPT>, что одно и то же.

Точно так же можем изменять то или иное значение фильтра:
sample.filters.alpha.opacity += 10;

Если мы хотим в run-time добавить фильтр, то мы знаем, что свойство filter - это строка, посему следующее выражение допустимо:
mydiv.style.filter = mydiv.style.filter + " fliph()"

Для чего же нужны фильтры? Во-первых, чтобы не писать скрипты. Во-вторых, даже если их приходится писать, маленький скрипт в сочетании с фильтрами предпочтительней большого анимированного gif. Посмотрите пример, спионеренный из MSDN

Итак, какие же бывают фильтры:

1) VISUAL FILTERS

Alpha

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

opacity - 0-полностью прозрачен, 100 - наоборот;
FinishOpacity-то же самое, но необязательно;
Style - 0 (монотонный фильтр) 1(линейный) 2(радиальный) 3(прямоугольный)
StartX
StartY
FinishX
FinishY-координаты начала и конца применения фильтра к объекту.

Пример

Blur

{FILTER: Blur(Add=add, Direction=direction, Strength=strength)}

add: 0-начальная картинка НЕ накладывается под получившуюся, 1 - наоборот
Direction - угол в градусах, куда будет размываться
Strength - на сколько пикселей размывается

Chroma

{FILTER: Chroma(Color=color)}

DropShadow

{FILTER: DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)}

Color-в формате RGB;
x,y - могут быть и отрицательными - направление тени
Positive (1 или 0) - отбрасывает ли тень на прозрачные участки

FlipH, FlipV

{FILTER: FlipH}
{FILTER: FlipV}

Glow

{FILTER: Glow(Color=color, Strength=strength)}

Color- в формате RGB;
Strength - сила от 1 до 255

Grayscale

{FILTER: Gray}

Invert

{FILTER: Invert}

Light

{FILTER: Light}

Имеет несколько методов

AddAmbient -добавляет источник света
AddCone  -добавляет конический источник света
AddPoint - точечный источник
ChangeColor - изменяет цвет иточника
ChangeStrength - изменяет силу света источника
Clear - уничтожает источник(и)
MoveLight - перемещает источник

Mask

{FILTER: Mask(Color=color)}
Color - RGB

Shadow

{FILTER: Shadow(Color=color, Direction=direction)}
Color-RGB;
Direction- угол в градусах, куда будет падать тень

Wave

{FILTER: Wave(Add=add, Freq=freq, LightStrength=strength, Phase=phase, Strength=strength)}

Add - 1 или 0 - будет ли подложен исходный обьект под результрующий;
Freq - частота (количество волн в рамках обьекта);
LightStrenght - сила света (0-100%);
Phase - фаза в градусах (0-360);
Strength - интенсивность эффекта.

XRay

{FILTER: XRay}

2) Blend Transition Filter
{ filter: blendTrans(Duration=duration)}

3) Reveal Transition Filter
{ filter: revealtrans(duration=duration, transition=transitionshape)}

СВОЙСТВА, МЕТОДЫ И СОБЫТИЯ

1) Duration - см. выше

2) enabled - определяет доступность или недоступность фильтра

<img id=image1 src="sample.jpg" style="filter:blur(strength=50) flipv()">

<SCRIPT>
image1.filters[1].enabled = false; // disable the flip filter
</SCRIPT>

3) Status - read-only. 0- транзиция остановлена, 1- назначена, 2 - работает
nStatus = object.filter.Status

4) событие Onfilterchange