Фильтры в DHTML
Фильтр - это некоторый алгоритм, преобразующий визуальное отображение элемента в окне браузера. Он может быть статическим или динамическим. Статический фильтр преобразует элемент, и после того он отображается. Динамический фильтр воздействует во времени на визуальное отображение элемента, меняя его непосредственно на HTML-странице, что приводит к эффекту анимации. Динамический фильтр ещё называют переходом из одного состояния отображения в другое.
Фильтры применяются не ко всем HTML-элементам, а только к тем, которые могут определять правильный прямоугольный блок при отображении в окне браузера и не являються окнами, как, например элемент <IFRAME>. В таблице перечислены все элементы HTML, к которым могут применяться фильтры.
Таблица 1. Элементы к которым применяются фильтры
| 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: значение. Каждый фильтр, как отмечалось выше, реализует определённый алгоритм преобразования видимого отображения элемента, поэтому значение свойства filter задаётся в форме функции:
filter: имя_фильтра([параметры]);
а параметры фильтра, если они присутствуют, задаются с использованием синтаксиса именованных параметров функции:
имя_параметра=значение_параметра
Некоторым фильтрам требуется несколько параметров, задаваемых через запятую, а некоторым фильтрам параметры вообще не нужны, но круглые скобки должны присутствовать обязательно.
К элементу можно применить несколько фильтров одновременно. В этом случае они задаются в виде списка с пробелом в качестве разделителя:
<IMG ID=img1 SRC="пример1.gif" STYLE="filter: blur(strength=50) fliph()>
В данном примере к графическому изображению применяются два фильтра: первый (blur) размазывает изображение на глубину в 50 пикселов, а второй (fliph) просто зеркально его отображает в горизонтальном направлении.
В Internet Explorer'e реализовано большое число разнообразных фильтров. В таблице 2 представлены все фильтры с кратким описанием их воздействия на визуализацию элементов.
Таблица Фильтры и их краткие описания
| alpha | Устанавливает уровень непрозрачности объекта |
| blur | Создаёт эффект размытия изображения |
| chroma |
| dropshadow | Рисует сплошной силует объекта, смещённый в заданном направлении, создавая тем самым эффект объекта, расположенного над страницей и отбрасывающего на неё тень |
| flipH | Переворачивает объект горизонтально |
| flipV | Переворачивает объект вертикально |
| glow | Добавляет свечение вдоль внешних границ объекта, создавая эффект "возгорания" границ объекта |
| gray | Удаляет цветовую гамму объекта и отображает его в серых тонах |
| invert | Меняет оттенок, насыщение и яркость объекта на противоположные |
| light | Подсвечивает объект |
| mask | Отображает текст так, как будто он выделен мышью |
| shadow | Рисует силует объекта вдоль одной из его границ в заданном направлении, создавая эффект тени |
| wave | Синусоидальное искривление объекта в вертикальном направлении, создавая эффект волнообразной поверхности |
| xray | Изменяет глубину цвета объекта и после этого отображает его в чёрно-белых тонах, имитируя рентгеновский снимок объекта |
Доступ к фильтрам и их параметрам в программируемых сценариях осуществляется, как обычно, с помощью объектной модели, предоставляемой браузером. В этой модели любой фильтр представляется в виде обычного объекта со своими свойствами и методами. Большинство свойств и методов соответствует параметрам фильтра в параметре STYLE. Некоторые свойства и методы доступны только из программируемого сценария.
Определить, какие фильтры применены к элементу, можно с помощью набора 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
}
</SCRIPT>
В приведённом примере объект picture сценария соответствует элементу <IMG> HTML-страницы. Переменная strengthWave хранит значение параметра strength фильтра wave. Оператор условия проверяет, не отключался ли фильтр gray объекта picture ранее в каком-либо сценарии (значение свойства enabled фильтров равно true, если разрешено его примененние к элементу). Если этот фильтр продолжает применяться, и параметр strength фильтра wave больше или равен 100, то этот параметр увеличивается на 50.
Можно ссылаться на фильтры объекта и с помощью числового индекса набора filters. Каждому фильтру, заданному в параметре или теге STYLE, соответствует определённый числовой индекс этого набора. Все фильтры индексируются в порядке их перечисления в свойстве filter каскадных таблиц стилей, начиная с нуля. Так, в привидённом примере фильтру wave соответствует индекс 0, фильтру gray - 1 и фильтру fliph - 2. Поэтому получить значение параметра strenth фильтра wave можно было бы и так:
strengthWave=picture.filters[0].strength;
