Фільтр - це деякий алгоритм, що перетворює візуальне зображення елемента у вікні браузера. Він може бути статичним або динамічним. Статичний фільтр перетворює елемент, і після цього елемент виводиться на сторінку. Динамічний фільтр впливає на візуальне відображення елемента в часі, що призводить до ефекту анімації. Динамічний фільтр ще називають переходом з одного стану відображення в інше.
У табл. 7.3 перераховані елементи HTML, до яких можуть застосовуватися фільтри.
Таблиця 7.3. Елементи, до яких застосовуються фільтри
| Елемент
| Фільтр застосовується
|
| BODY
| Завжди
|
| BUTTON
| Завжди
|
| DIV
| Якщо задані ширина (властивість width), висота (властивість height) або елемент абсолютно позиціонується
|
| IMG
| Завжди
|
| INPUT
| Завжди
|
| MARQUEE
| Завжди
|
| SPAN
| Якщо задані ширина (властивість width), висота (властивість height) або елемент абсолютно позиціонується
|
| TABLE
| Завжди
|
| TD
| Завжди
|
| TEXTAREA
| Завжди
|
| TH
| Завжди
|
Фільтри не застосовуються до наступних елементів HTML-сторінки: аплети Java, IFRAME, SELECT, OPTION, P, EM, STRONG і до всіх заголовків H1, H2 і т. д.
Застосувати фільтр до елемента просто: досить задати значення його властивості filter:
filter: імя_фільтра([параметри]);
а параметри фільтру, якщо вони присутні, задаються з використанням синтаксису іменованих параметрів функції:
імя_параметра = значення_параметра
До елементу можна застосувати декілька фільтрів одночасно:
<IMG ID=img1 SRC="file.gif" STYLE="filter:blur(strength=50) fliph()">
В Internet Explorer реалізована велика кількість різноманітних фільтрів. У табл. 10.10 представлені всі фільтри з коротким описом їх впливу на візуалізацію елементів.
Таблиця 10.10. Фільтри в Internet Explorer
| Фільтр
| Опис
|
| alpha
| Встановлює рівень непрозорості об'єкта
|
| blendTrans
| Збільшує або зменшує контрастність відображення об'єкта
|
| blur
| Створює ефект розмиття зображення
|
| chroma
| Робить прозорими пікселі заданого кольору
|
| dropShadow
| Малює суцільний силует об'єкта, зміщений в заданому напрямку, створюючи тим самим ефект об'єкта, розташованого над сторінкою, і відкидає на неї тінь
|
| flipH
| Малює об'єкт у дзеркальному відображенні відносно горизонтальної площини
|
| flipV
| Малює об'єкт у дзеркальному відображенні відносно вертикальної площини
|
| glow
| Додає підсвітку вздовж зовнішніх меж об'єкта, створюючи ефект "спалаху"
|
| gray
| Видаляє колірну гаму об'єкта і відображає його у сірих тонах
|
| invert
| Змінює відтінок, насичення і яскравість об'єкта на протилежні
|
| light
| Підсвічує об'єкт
|
| mask
| Зафарбовує прозорі пікселі об'єкта заданим кольором і створює прозору маску з непрозорих пікселів об'єкта
|
| redirect
| Перетворює об'єкт в об'єкт DAimage, до якого можна застосувати всі можливості технології MS DirectAnimation
|
| revealTrans
| Показує або приховує об'єкти, використовуючи різноманітні ефекти переходу
|
| shadow
| Малює силует об'єкта уздовж однієї з його меж у заданому напрямку, створюючи ефект тіні
|
| wave
| Синусоїдальне викривлення об'єкта у вертикальному напрямку, яке утворює ефект хвилеподібної поверхні
|
| xray
| Змінює глибину кольору об'єкта і після цього відображає його у чорно-білих тонах, імітуючи рентгенівський знімок об'єкта
|
Цікаві динамічні ефекти досягаються використанням фільтрів спільно зі сценаріями. У процесі виконання сценарію можна встановлювати або змінювати параметри фільтрів, призначати нові фільтри, створювати візуальні ефекти через певні інтервали часу і т.п..
Доступ до фільтрів та їх параметрів у сценаріях надає властивість filters відповідного об'єкта:
<IMG ID=picture SRC="picture.gif"
STYLE = "filter: wave(strength=100) gray() fliph()">
....
<SCRIPT>
strengthWave = picture.filters.wave.strength;
if (picture.filters['gray'].enabled && strengthWave>=100) {
picture.filters.wave.strength + = 50 }
picture.style.filter += ' alpha(0.5)';
</SCRIPT>
Можна посилатися на фільтри об'єкта й за допомогою числового індексу набору filters. Всі фільтри індексуються у порядку їх оголошення у властивості filter, починаючи з нуля. Тому отримати значення параметра strength фільтра wave можна було б і так:
strengthWave = picture.filters[0].strength;
Використання числового індексу є єдиним способом ідентифікування фільтра, якщо до елемента застосовуються одночасно кілька фільтрів одного і того ж типу (природно, з різними параметрами).
