|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Фильтры в DHTML |
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Вадим Беляков (www.russa.ru/~vadim/) Создавать HTML-страницы с мультимедийными эффектами также просто, как и применять каскадные таблицы стилей (CSS), о которых уже неоднократно писалось в предыдущих номерах журнала. Разнообразные визуальные динамические эффекты: постепенное "проявление" изображения или текста, изменение контрастности изображения, "свечение" букв текста и т.д. - всё это можно увидеть при отображении страницы в браузере Internet Explorer 4.0 и выше. Реализуются мультимедийные эффекты применением фильтров к элементам страницы и организацией переходов из одного визуального состояния к другому. Фильтр - это некоторый алгоритм, преобразующий визуальное отображение элемента в окне браузера. Он может быть статическим или динамическим. Статический фильтр преобразует элемент, и после того он отображается. Динамический фильтр воздействует во времени на визуальное отображение элемента, меняя его непосредственно на HTML-странице, что приводит к эффекту анимации. Динамический фильтр ещё называют переходом из одного состояния отображения в другое. Фильтры применяются не ко всем HTML-элементам, а только к тем, которые могут определять правильный прямоугольный блок при отображении в окне браузера и не являються окнами, как, например элемент <IFRAME>. В таблице 1 перечислены все элементы 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 представлены все фильтры с кратким описанием их воздействия на визуализацию элементов. Таблица 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; Вот в принципе и всё, что я хотел сказать Вам по поводу фильтров в DHTML. Если у Вас есть какие - либо вопросы, то пишите мне: vadimka@novgorod.net, или заходите на сайт.
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Copyright © "Internet Zone", http://www.izcity.com/, info@izcity.com |