IZONE - http://www.izcity.com/ - бесплатный софт, вэб-сервисы, ресурсы для раскрутки, свежие номера журнала "Internet Zone".

Фильтры в DHTML

Вадим Беляков (www.russa.ru/~vadim/)

Создавать HTML-страницы с мультимедийными эффектами также просто, как и применять каскадные таблицы стилей (CSS), о которых уже неоднократно писалось в предыдущих номерах журнала. Разнообразные визуальные динамические эффекты: постепенное "проявление" изображения или текста, изменение контрастности изображения, "свечение" букв текста и т.д. - всё это можно увидеть при отображении страницы в браузере Internet Explorer 4.0 и выше. Реализуются мультимедийные эффекты применением фильтров к элементам страницы и организацией переходов из одного визуального состояния к другому.

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

Фильтры применяются не ко всем HTML-элементам, а только к тем, которые могут определять правильный прямоугольный блок при отображении в окне браузера и не являються окнами, как, например элемент <IFRAME>. В таблице 1 перечислены все элементы 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 представлены все фильтры с кратким описанием их воздействия на визуализацию элементов.

Таблица 2. Фильтры и их краткие описания

alpha

Устанавливает уровень непрозрачности объекта

Пример использования

blendTrans Увеличивает или уменьшает контрастность отображения объекта  

blur

Создаёт эффект размытия изображения

Пример использования

chroma

Делает прозрачными пикселы заданного цвета

Пример использования

dropShadow

Рисует сплошной силует объекта, смещённый в заданном направлении, создавая тем самым эффект объекта, расположенного над страницей и отбрасывающего на неё тень

Пример использования

flipH

Рисует объект в зеркальном отображении относительно горизонтальной плоскости

Пример использования

flipV

Рисует объект в зеркальном отображении относительно вертикальной плоскости

Пример использования

glow

Добавляет свечение вдоль внешних границ объекта, создовая эффект "возгорания" границ объекта

Пример использования

gray

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

Пример использования

invert

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

Пример использования

light

Подсвечивает объект

Пример использования

mask

Закрашивает прозрачные пикселы объекта заданнным цветом и создаёт прозрачную маску из непрозрачных пикселов объекта

Пример использования

redirect Преобразует объект в объект DAImage, к которому можно применить все возможности технологии MS Direct Animation  
revealTrans Показывает или скрывает объекты, используя 23 определённых в фильтре перехода  

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;

Вот в принципе и всё, что я хотел сказать Вам по поводу фильтров в DHTML. Если у Вас есть какие - либо вопросы, то пишите мне: vadimka@novgorod.net, или заходите на сайт.

 


Copyright © "Internet Zone", http://www.izcity.com/, info@izcity.com