Теги HTML



         

Фильтры в DHTML - часть 2


/p>

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

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

Переворачивает объект горизонтально

Переворачивает объект вертикально

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

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

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

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

Отображает текст так, как будто он выделен мышью

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

Синусоидальное искривление объекта в вертикальном направлении, создавая эффект волнообразной поверхности

Изменяет глубину цвета объекта и после этого отображает его в чёрно-белых тонах, имитируя рентгеновский снимок объекта

Кстати, стоит заметить, что интересные динамические эффекты достигаются использованием фильтров совместно со сценариями. В процессе выполнения сценария можно устанавливать или изменять параметры применяемых к объектам фильтров, можно назначать новые фильтры, создавать визуальные эффекты через определённые интервалы времени и делать многое другое.

Доступ к фильтрам и их параметрам в программируемых сценариях осуществляется, как обычно, с помощью объектной модели, предоставляемой браузером. В этой модели любой фильтр представляется в виде обычного объекта со своими свойствами и методами. Большинство свойств и методов соответствует параметрам фильтра в параметре 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;




Содержание  Назад  Вперед