Мультимедийные эффекты
для MS Internet Explorer 4.0+
(часть 3)

Строка Фильтра

Объект-свойство элемента style также имеет свойство filter. Это - строка для чтения/записи, которая может использоваться, чтобы управлять CSS фильтрами элемента непосредственно. Например, при использовании DIV, определенного ниже, следующий код:

<div id=mydiv style="height:50; width:50; filter:wave(strength=100)
            revealTrans(transition=3 duration=4)"> This is a div </div>
<script>
...
    alert(mydiv.style.filter)
...
</script>

вызвыл бы функцию alert со следующей строкой:

wave(strength=100) revealTrans(transition=3 duration=4)

Запись в это свойство особенно полезна для смены фильтра элемента динамически. Обратите внимание, что запись в это свойство переписывает существующее значение и браузер перерисовывает новую строку немедленно. Следующий пример добавляет фильтр FlipH к коллекции на лету.

<DIV ID="mydiv" STYLE="height:50; width:50; filter:wave(strength=100)
        revealTrans(transition=3 duration=4)"> This is a div </DIV>

<SCRIPT>
...
    mydiv.style.filter += " fliph()"
...
</SCRIPT>

После изменения, новая строка фильтра теперь выглядела бы следующим образом:

wave(strength=100) revealTrans(transition=3 duration=4) fliph()

Любые следующие изменения строки фильтра будут менять уже эту новую строку.

Примечание. Как уже отмечалось, изменение фильтров возможно также через объектную модель, т.е. через обращения к их методам и свойствам. Для улучшения эффективности, настоятельно рекомендуется, чтобы Вы обращались к CSS фильтрам через объектную модель всякий раз, когда это возможно, и только тогда обращались к строке фильтра, когда объектные возможности модели не адекватны. Даже в случае динамического добавления фильтров рекомендуется в большинстве случаев добавить фильтр в начальных атрибутах фильтра листа стилей со свойством enabled установленным в "false". Когда необходимо, чтобы фильтр был применен к элементу, нужно просто установить из сценария enabled=true для данного фильтра. (Заметьте, что в атрибутах стиля filter необходимо использовать кавычки для true/false, в то время как в сценарии кавычки употреблять не надо. Чтобы не запутаться с кавычками, можно применять числовые значения для enabled без кавычек (false=0, true=1).) Пример в листинге ниже показывает, как изменить фильтр из сценария, изменяя свойство enabled фильтров.

...
<IMG id=sample SRC="sample.gif" STYLE="filter: xray(ENABLED=0)
       flipH(ENABLED=0) flipV(ENABLED=0)
       alpha(opacity=50, ENABLED=0) blur(amount=10, ENABLED=0)
       chroma(color=black, ENABLED=0) dropShadow(color=gray, ENABLED=0)
       glow(strength=10, color=gray,ENABLED=0)
       gray(ENABLED=0) invert(ENABLED=0) light(ENABLED=0)
       mask(color=blue,ENABLED=0) shadow(color=gray, ENABLED=0)
       wave(strength=8, freq=3, lightstrength=20, add=0,
 phase=90, ENABLED=0);">
<br>
<input type=button value="next filter" onclick="next(1)">
<input type=button value="prev filter" onclick="next(-1)">

<SCRIPT LANGUAGE="JavaScript">
var cf=0;
function next(dir)
{
   sample.filters[cf].enabled=false;   // или sample.filters[cf].enabled=0;
   cf+=dir;
   if (cf>=sample.filters.length) cf=0;
   if (cf<0) cf=sample.filters.length-1;
   sample.filters[cf].enabled=true;    // или sample.filters[cf].enabled=1;
}
</SCRIPT>
...

(см. как это работает) [> далее >]

© 2000, Сергей Кузнецов