сейчас на сайте:
Лучшие сказки мира 03skazki.ru
Детектив и фантастика 03pressa.ru
Песни прошлых лет 03pesni.ru
Для досуга
Фильтры DHTML. Описание Визуальные фильтры DHTML Обратите внимание: фильтры, описанные здесь поддерживаются только Internet Explorer 4.0. Визуальные Фильтры должны быть помещены в Style Sheets поскольку они применяются, используя атрибуты Style Sheet. Визуальные Фильтры обеспечивают управление визуальными объектами. Также, через создание сценария, примененные фильтры - могут динамически меняться без перезагрузки документа. Обычно, они применяются к элементу <IMG>, но могут применяться и к элементу <DIV>, который в свою очередь могут содержать любой HTML, так что визуальные фильтры могут применяться фактически к любому содержанию. Обратите внимание, что, если они применяются к текстовым блокам ( в элементах <DIV>), элемент <DIV> должен определить атрибуты ширины и высоты Style Sheets . Список визуальных Фильтров: Фильтр / Описание Alpha / Различные эффекты прозрачности объекта. Blur / Размывает и смазывает объект. Chroma / Делает определенный цвет прозрачным. DropShadow / Копирует и сдвигает объект в виде тени. FlipH / Горизонтальное зеркальное изображение объекта. FlipV / Вертикальное зеркальное изображение объекта. Glow / Adds radiance around the outside edges of the object. Gray / Уничтожает цвета - делает ЧБ объект. Invert / Название говорит само за себя. Light / Осветляет объект. Mask / Выделяет объект. Shadow / Еще один вид тени(у меня не работают др. параметры). Wave / Создает волнистый эффект. XRay / Что-то типа Invert`а и Gray`я. Internet Explorer так же поддерживает Transition Filters (Reveal и Blend transitions) фильтры появления и смешивания объекта. Основной синтаксис применения фильтров: STYLE="filter:ИМЯ_ФИЛЬТРА(ПАРАМЕТР1, ПАРАМЕТР2...)" Параметры для каждого фильтра определяются свои собственные они описаны далее. alpha Визуальный фильтр Alpha может использоваться, чтобы установить прозрачность объекта - или всего изображения целиком, или области градиента. STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity, Style=style, StartX=startX, StartY=startY, FinishX=finishX, FinishY=finishY)" Opacity Уровень прозрачности, 0-100, где 0 прзрачно, 100 непрозрачно FinishOpacity Конечный уровень прозрачности, 0-100, где 0 прзрачно, 100 непрозрачно Style принимает значения 0 (uniform), 1 (линия), 2 (круг) or 3 (прямоугольник) StartX координатаX начала градиента StartY координата Y начала градиента FinishX координата X конца градиента FinishY координата Y конца градиента blur Фильтр Blur создает впечатление движения путем размытия объекта. STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)" Add Добавляет размываемый объект к размытому ( любое целое значение, 0 - не добавляет) Direction 0 - 315 с шагом в 45 - определяет направление размытия Strength Целое значение, представляющее число пикселей 'глубины' изображаемого объекта chroma Фильтр Chroma делает определенный цвет рисунка прозрачным (а надо ???). STYLE="filter:Chroma(Color = color)" Color Любой цвет ( #rrggbb ). Что бы данный фильтр работал нормально необходимо, что бы выбранный цвет присутствовал в объекте. dropShadow Фильтр dropShadow добавляет силуэт объекта, смещенный в определенном направлении. STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)" Color Цвет тени ( #rrggbb hex ). OffX Горизонтальное смещение тени OffY Вертикальное смещение тени Positive Любое целое значение (не равное 0) создает тень для видимых пикселей объекта, '0' (false) - для невидимых пикселей. flipH Фильтр FlipH переворачивает объект горизонтально. STYLE="filter:FlipH" flipV The FlipV переворачивает объект вертикально. STYLE="filter:FlipV" glow Фильтр Glow добавляет сияние вокруг объекта. STYLE="filter:Glow(Color=color, Strength=strength)" Color Цвет сияния ( #rrggbb hex ). Strength Интенсивность сияния, 0-100 gray Фильтр Gray Уничтожает цвета - делает черно-белый объект. STYLE="filter:Gray" invert Фильтр Invert реверсирует оттенок, насыщенность и яркость объекта. STYLE="filter:Invert" light Фильтр Light Делает объект как если бы на него посветили. Световые фильтры применяются, устанавливая световой источник, определенный одним из следующих методов: AddAmbient (R,G,B,strength) Добавляет окружающий световой источник к изображению. Окружающий свет не-направлен и освещает всю область. Солнце испускает окружающий свет. Синтаксис: object.style.filters.Light(n).addAmbient(R,G,B,strength) Где R , G и B - значения (0-255), чтобы определить цвет окружающего света , и strength определяет 'количество' света. AddCone (x1,y1,z1,x2,y2,R,G,B,strength,spread) Добавляет к изображению, источник освещения в виде конуса. Свет направленный и освещает только определенную область. Синтаксис: object.style.filters.Light(n) .addCone(x1,y1,z1,x2,y2,R,G,B,strength,spread) Где x1 , y1 Значения определяющие положение источника света, x2 и y2 - определяют координаты куда направлен свет, R , G и B - значения (0-255), чтобы определить цвет света, strength определяет 'количество' света. и spread определяет угол распространения (0-90, в градусах). AddPoint (x,y,z,R,G,B,strength) Добавляет к изображению точечный источник освещения.Точечный источник освещения - лампочка. Синтаксис: object.style.filters.Light(n) .addPoint(x,y,z,R,G,B,strength) Где x , y и z координаты точечного источника освещения... осталные параметры как у других методов Еще несколько методов Светового Визуального фильтра: ChangeColor (lightnumber, r,g,b, fAbsolute) Метод ChangeColor изменит цвет светового фильтра, примененного к объекту.Используйте lightnumber что бы определить световой источник, чей цвет должен быть изменен (это - позиция в массиве Lights), r,g и b, новый цвет, fAbsoloute может принимать значение true (nonzero), и false (т.е. zero),на что это влияет посмотрите сами... ChangeStrength (lightnumber, strength, fAbsolute) Метод ChangeStrength изменяет силу определенного светового фильтра ( крторый определяется аргументом lightnumber ) на силу определенную в параметре strength ... Clear Метод Clear удаляет все источники света для определенного светового фильтра. MoveLight (lightnumber, x, y, z, fAbsolute) Метод MoveLight передвигает источник света (в случае AddPoint), место освещения (в случае AddCone). The x , y и z значения определяющие положения передвижения света, или абсолютно ( fAbsoloute=nonzero ) или относительно ( fAbsolute=false ). mask Фильтр Mask выделяет объект, как если бы вы его иыделили мышью, при этом можно задать цвет выделения. Синтаксис: STYLE="filter:Mask(Color=color)" Где Color цвет используемый для выделения. shadow Фильтр shadow делает тень объекту. Синтаксис: filter:Shadow(Color=color, Direction=direction) Color определяет цвет тени ( #rrggbb hex) Direction (0-315 с шагом в 45 градусов), определяет направление тени. wave Фильтр wave делает объект волнистым. Синтаксис: filter: Wave(Add=add, Freq=freq, LightStrength=strength, Phase=phase, Strength=strength) Add значение , определяющее, добавлен ли первоначальный объект (true, nonzero) к фильтрованному объекту или нет (false, zero) Freq целое значение, определяющее число волн LightStrength сила волны в % Phase определяет угловое смещение волн (т.е. 0/100% = 360 градусов, 25% = 90 градусов) Strength целое значение, определяющее интенсивность эффекта волны xray Фильтр xray воздействует на объект как Х-луч (?). Синтаксис: STYLE="filter:Xray" Transition Filters RevealTrans Filter Фильтр RevealTrans может быть применен к любому объекту, показывая или пряча его, при этом используются различные техники. Синтаксис: STYLE="filter: revealtrans(duration=duration, transition=transitionshape) Где Duration время перехода из одного состояния в другое. Формат записи секунды.миллисекунды Например 2.1 = 2 секунды, 100 миллисекунд. Transition(переход) может быть следующим ( названия оставлю на английском что бы не портить художественный замысел авторов...): Значение Описание 0 Box in 1 Box out 2 Circle in 3 Circle out 4 Wipe up 5 Wipe down 6 Wipe right 7 Wipe left 8 Verical blins 9 Horizontal blinds 10 Checkerboard across 11 Checkerboard down 12 Random dissolve 13 Split vertical in 14 Split vertical out 15 Spli horizontal in 16 Split horizontal out 17 Strips left down 18 Strips left up 19 Strips right down 20 Strips right up 21 Random bars horizontal 22 Random bars vertical 23 Произвольный эффект (любой из 23) Внимание : Фильтр Reveal Transition лучше применять со следующими событиями: Apply Метод Apply используется, чтобы фактически применить фильтр. Play Метод Play используется, чтобы фактически запустить фильтр. Stop Метод Stop используется что бы остановить применение фильтра, и может быть вызван в любое время когда фильтр запущен. Properties Фильтры Reveal Transition имеют свойства status и duration . Свойство Duration отражает текущую продолжительность фильтра и status определяет значение в зависимости от текущего состояния перехода. "0" = stop, "1" = apply, "2" = play. BlendTrans Filter Фильтр BlendTrans может быть применен к объекту, что бы 'проявить' его (fade it) или 'затушить' (fade out), через определенный период времени. Синтаксис: STYLE="filter: blendtrans(duration=duration)" Где Duration время занимаемое переходом. Формат записи секунды.миллисекунды Например 2.1 = 2 секунды, 100 миллисекунд. Фильтр - это некоторый алгоритм, преобразующий визуальное отображение элемента в окне браузера. Он может быть статическим или динамическим. Статический фильтр преобразует элемент, и после того он отображается. Динамический фильтр воздействует во времени на визуальное отображение элемента, меняя его непосредственно на 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;
Обратите внимание: фильтры, описанные здесь поддерживаются только Internet Explorer 4.0. Визуальные Фильтры должны быть помещены в Style Sheets поскольку они применяются, используя атрибуты Style Sheet.
Визуальные Фильтры обеспечивают управление визуальными объектами. Также, через создание сценария, примененные фильтры - могут динамически меняться без перезагрузки документа. Обычно, они применяются к элементу <IMG>, но могут применяться и к элементу <DIV>, который в свою очередь могут содержать любой HTML, так что визуальные фильтры могут применяться фактически к любому содержанию. Обратите внимание, что, если они применяются к текстовым блокам ( в элементах <DIV>), элемент <DIV> должен определить атрибуты ширины и высоты Style Sheets .
Список визуальных Фильтров:
Фильтр / Описание Alpha / Различные эффекты прозрачности объекта. Blur / Размывает и смазывает объект. Chroma / Делает определенный цвет прозрачным. DropShadow / Копирует и сдвигает объект в виде тени. FlipH / Горизонтальное зеркальное изображение объекта. FlipV / Вертикальное зеркальное изображение объекта. Glow / Adds radiance around the outside edges of the object. Gray / Уничтожает цвета - делает ЧБ объект. Invert / Название говорит само за себя. Light / Осветляет объект. Mask / Выделяет объект. Shadow / Еще один вид тени(у меня не работают др. параметры). Wave / Создает волнистый эффект. XRay / Что-то типа Invert`а и Gray`я.
Internet Explorer так же поддерживает Transition Filters (Reveal и Blend transitions) фильтры появления и смешивания объекта.
Основной синтаксис применения фильтров: STYLE="filter:ИМЯ_ФИЛЬТРА(ПАРАМЕТР1, ПАРАМЕТР2...)"
Параметры для каждого фильтра определяются свои собственные они описаны далее.
alpha
Визуальный фильтр Alpha может использоваться, чтобы установить прозрачность объекта - или всего изображения целиком, или области градиента. STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity, Style=style, StartX=startX, StartY=startY, FinishX=finishX, FinishY=finishY)" Opacity Уровень прозрачности, 0-100, где 0 прзрачно, 100 непрозрачно FinishOpacity Конечный уровень прозрачности, 0-100, где 0 прзрачно, 100 непрозрачно Style принимает значения 0 (uniform), 1 (линия), 2 (круг) or 3 (прямоугольник) StartX координатаX начала градиента StartY координата Y начала градиента FinishX координата X конца градиента FinishY координата Y конца градиента
blur
Фильтр Blur создает впечатление движения путем размытия объекта. STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)" Add Добавляет размываемый объект к размытому ( любое целое значение, 0 - не добавляет) Direction 0 - 315 с шагом в 45 - определяет направление размытия Strength Целое значение, представляющее число пикселей 'глубины' изображаемого объекта
chroma
Фильтр Chroma делает определенный цвет рисунка прозрачным (а надо ???). STYLE="filter:Chroma(Color = color)" Color Любой цвет ( #rrggbb ). Что бы данный фильтр работал нормально необходимо, что бы выбранный цвет присутствовал в объекте.
dropShadow
Фильтр dropShadow добавляет силуэт объекта, смещенный в определенном направлении. STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)" Color Цвет тени ( #rrggbb hex ). OffX Горизонтальное смещение тени OffY Вертикальное смещение тени Positive Любое целое значение (не равное 0) создает тень для видимых пикселей объекта, '0' (false) - для невидимых пикселей.
flipH
Фильтр FlipH переворачивает объект горизонтально. STYLE="filter:FlipH"
flipV
The FlipV переворачивает объект вертикально. STYLE="filter:FlipV"
glow
Фильтр Glow добавляет сияние вокруг объекта. STYLE="filter:Glow(Color=color, Strength=strength)" Color Цвет сияния ( #rrggbb hex ). Strength Интенсивность сияния, 0-100
gray
Фильтр Gray Уничтожает цвета - делает черно-белый объект. STYLE="filter:Gray"
invert
Фильтр Invert реверсирует оттенок, насыщенность и яркость объекта. STYLE="filter:Invert"
light
Фильтр Light Делает объект как если бы на него посветили. Световые фильтры применяются, устанавливая световой источник, определенный одним из следующих методов: AddAmbient (R,G,B,strength) Добавляет окружающий световой источник к изображению. Окружающий свет не-направлен и освещает всю область. Солнце испускает окружающий свет. Синтаксис: object.style.filters.Light(n).addAmbient(R,G,B,strength) Где R , G и B - значения (0-255), чтобы определить цвет окружающего света , и strength определяет 'количество' света. AddCone (x1,y1,z1,x2,y2,R,G,B,strength,spread) Добавляет к изображению, источник освещения в виде конуса. Свет направленный и освещает только определенную область.
Синтаксис: object.style.filters.Light(n) .addCone(x1,y1,z1,x2,y2,R,G,B,strength,spread) Где x1 , y1 Значения определяющие положение источника света, x2 и y2 - определяют координаты куда направлен свет, R , G и B - значения (0-255), чтобы определить цвет света, strength определяет 'количество' света. и spread определяет угол распространения (0-90, в градусах). AddPoint (x,y,z,R,G,B,strength) Добавляет к изображению точечный источник освещения.Точечный источник освещения - лампочка. Синтаксис: object.style.filters.Light(n) .addPoint(x,y,z,R,G,B,strength) Где x , y и z координаты точечного источника освещения... осталные параметры как у других методов
Еще несколько методов Светового Визуального фильтра: ChangeColor (lightnumber, r,g,b, fAbsolute) Метод ChangeColor изменит цвет светового фильтра, примененного к объекту.Используйте lightnumber что бы определить световой источник, чей цвет должен быть изменен (это - позиция в массиве Lights), r,g и b, новый цвет, fAbsoloute может принимать значение true (nonzero), и false (т.е. zero),на что это влияет посмотрите сами... ChangeStrength (lightnumber, strength, fAbsolute) Метод ChangeStrength изменяет силу определенного светового фильтра ( крторый определяется аргументом lightnumber ) на силу определенную в параметре strength ... Clear Метод Clear удаляет все источники света для определенного светового фильтра. MoveLight (lightnumber, x, y, z, fAbsolute) Метод MoveLight передвигает источник света (в случае AddPoint), место освещения (в случае AddCone). The x , y и z значения определяющие положения передвижения света, или абсолютно ( fAbsoloute=nonzero ) или относительно ( fAbsolute=false ).
mask
Фильтр Mask выделяет объект, как если бы вы его иыделили мышью, при этом можно задать цвет выделения. Синтаксис: STYLE="filter:Mask(Color=color)" Где Color цвет используемый для выделения.
shadow
Фильтр shadow делает тень объекту. Синтаксис: filter:Shadow(Color=color, Direction=direction) Color определяет цвет тени ( #rrggbb hex) Direction (0-315 с шагом в 45 градусов), определяет направление тени.
wave
Фильтр wave делает объект волнистым. Синтаксис: filter: Wave(Add=add, Freq=freq, LightStrength=strength, Phase=phase, Strength=strength) Add значение , определяющее, добавлен ли первоначальный объект (true, nonzero) к фильтрованному объекту или нет (false, zero) Freq целое значение, определяющее число волн LightStrength сила волны в % Phase определяет угловое смещение волн (т.е. 0/100% = 360 градусов, 25% = 90 градусов) Strength целое значение, определяющее интенсивность эффекта волны
xray
Фильтр xray воздействует на объект как Х-луч (?). Синтаксис: STYLE="filter:Xray"
Transition Filters
RevealTrans Filter
Фильтр RevealTrans может быть применен к любому объекту, показывая или пряча его, при этом используются различные техники. Синтаксис: STYLE="filter: revealtrans(duration=duration, transition=transitionshape) Где Duration время перехода из одного состояния в другое. Формат записи секунды.миллисекунды Например 2.1 = 2 секунды, 100 миллисекунд. Transition(переход) может быть следующим ( названия оставлю на английском что бы не портить художественный замысел авторов...):
Значение Описание 0 Box in 1 Box out 2 Circle in 3 Circle out 4 Wipe up 5 Wipe down 6 Wipe right 7 Wipe left 8 Verical blins 9 Horizontal blinds 10 Checkerboard across 11 Checkerboard down 12 Random dissolve 13 Split vertical in 14 Split vertical out 15 Spli horizontal in 16 Split horizontal out 17 Strips left down 18 Strips left up 19 Strips right down 20 Strips right up 21 Random bars horizontal 22 Random bars vertical 23 Произвольный эффект (любой из 23)
Внимание : Фильтр Reveal Transition лучше применять со следующими событиями:
Apply Метод Apply используется, чтобы фактически применить фильтр.
Play Метод Play используется, чтобы фактически запустить фильтр.
Stop Метод Stop используется что бы остановить применение фильтра, и может быть вызван в любое время когда фильтр запущен.
Properties
Фильтры Reveal Transition имеют свойства status и duration . Свойство Duration отражает текущую продолжительность фильтра и status определяет значение в зависимости от текущего состояния перехода. "0" = stop, "1" = apply, "2" = play.
BlendTrans Filter
Фильтр BlendTrans может быть применен к объекту, что бы 'проявить' его (fade it) или 'затушить' (fade out), через определенный период времени. Синтаксис: STYLE="filter: blendtrans(duration=duration)" Где Duration время занимаемое переходом. Формат записи секунды.миллисекунды Например 2.1 = 2 секунды, 100 миллисекунд.
Фильтр - это некоторый алгоритм, преобразующий визуальное отображение элемента в окне браузера. Он может быть статическим или динамическим. Статический фильтр преобразует элемент, и после того он отображается. Динамический фильтр воздействует во времени на визуальное отображение элемента, меняя его непосредственно на HTML-странице, что приводит к эффекту анимации. Динамический фильтр ещё называют переходом из одного состояния отображения в другое.
Фильтры применяются не ко всем HTML-элементам, а только к тем, которые могут определять правильный прямоугольный блок при отображении в окне браузера и не являються окнами, как, например элемент <IFRAME>. В таблице перечислены все элементы HTML, к которым могут применяться фильтры.
Таблица 1. Элементы к которым применяются фильтры
Фильтры не применяются к следующим элементам 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 представлены все фильтры с кратким описанием их воздействия на визуализацию элементов.
Таблица Фильтры и их краткие описания
Делает прозрачными пикселы заданного цвета
Кстати, стоит заметить, что интересные динамические эффекты достигаются использованием фильтров совместно со сценариями. В процессе выполнения сценария можно устанавливать или изменять параметры применяемых к объектам фильтров, можно назначать новые фильтры, создавать визуальные эффекты через определённые интервалы времени и делать многое другое.
Доступ к фильтрам и их параметрам в программируемых сценариях осуществляется, как обычно, с помощью объектной модели, предоставляемой браузером. В этой модели любой фильтр представляется в виде обычного объекта со своими свойствами и методами. Большинство свойств и методов соответствует параметрам фильтра в параметре 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;