Общая характеристика и синтаксис
Под фильтром принято понимать некую функцию, так или иначе преобразующую визуальное представление элемента на веб-странице. Преобразование осуществляется непосредственно в браузере, т.е. на стороне клиента (подключение сервера не требуется). Сразу следует заметить, что Dynamic HTML, к которому относятся динамические фильтры, является разработкой корпорации Microsoft, поэтому в полной мере применение этих компонентов доступно в Internet Explorer 4.х и выше (финальная версия Netscape 6, по обещаниям разработчиков, будет поддерживать только лишь часть функциональных возможностей DHTML). Тем не менее, для горячих сторонников браузера от Microsoft или людей, определяющих свои предпочтения потенциальной аудитории разрабатываемых веб-узлов в соответствии со статистикой различных серверных анализаторов и результатами исследований, средства динамического языка разметки гипертекста будут как нельзя более кстати и смогут существенно улучшить визуальное представление публикуемого контента.
Динамические фильтры можно применить не ко всем элементам веб-страницы, а только к тем, которые способны определять блок прямоугольного вида при интерпретации браузером и при этом сами не являющиеся окнами (к примеру, «плавающие» фреймы).
| Наименование элемента | Режим применения |
| BODY | Всегда |
| BUTTON | Всегда |
| DIV | При наличии заданных параметров высоты и ширины или абсолютном позиционировании на странице |
| IMG | Всегда |
| INPUT | Всегда |
| SPAN | При наличии заданных параметров высоты и ширины или абсолютном позиционировании на странице |
| TABLE | Всегда |
| TD | Всегда |
| TEXTAREA | Всегда |
Синтаксис фильтра достаточно прост и аналогичен правилам задания свойств элементов с помощью тега STYLE. Запись производится в следующем виде:
filter: название_фильтра(параметры)
где «параметры» определяются в стандартном для HTML виде:
название_параметра=значение_параметра
| Название фильтра | Свойства | Методы |
| blur | add, direction, enabled, strength | — |
| chroma | color, enabled | — |
| glow | color, enabled, strength | — |
| invert | enabled | — |
| light | enabled | addAmbient, addCone, addPoint, moveLight и др. |
| redirect | enabled | elementImage |
| shadow | color, direction, enabled | — |
| xray | enabled | — |
Браузер MS Internet Explorer 4.х (и выше) поддерживает не такое уж большое количество фильтров, однако широкие возможности по настройке заданных параметров, свойств и методов фильтров представляют применение этой технологии в более выгодном свете.
| Название фильтра | Описание действия |
| alpha | Определение степени прозрачности объекта |
| blendTrans | Настройка контрастности отображения объекта |
| blur | Размытие объекта |
| chroma | Установление прозрачности пикселям заданного цвета |
| dropShadow | Создание сплошного силуэта объекта |
| flipH | Зеркальное отображение объекта по горизонтали |
| flipV | Зеркальное отображение объекта по вертикали |
| glow | Создание эффекта свечения внешних границ объекта |
| gray | Отображение объекта в серых тонах |
| invert | Инвертирование цветовой гаммы объекта |
| light | Создание эффекта освещения объекта |
| mask | Создание прозрачной маски из непрозрачных пикселей объекта |
| redirect | Преобразование объекта в элемент DAImage (технология Microsoft DirectAnimation) |
| revealTrans | Эффект появления/исчезновения объекта |
| shadow | Создание силуэта объекта вдоль его границы |
| wave | Эффект искривления объекта по вертикали |
| xray | Изменение глубины цвета объекта (эффект рентгеновского снимка) |
Рассмотрим на примерах возможные варианты действия некоторых фильтров.
Фильтр wave
Фильтр WAVE создает синусоидальное искривление объекта в вертикальном направлении и имеет свойства add, enabled, freq, lightStrength, phase и strength. Свойства enabled и strength были описаны выше, а остальные имеют следующее предназначение: add определяет необходимость добавления исходного вида объекта в его отфильтрованную интерпретацию; freq задает количество максимумов в волне искривления объекта; lightStrength добавляет эффект трехмерности гребням волны искажения объекта; phase определяет фазу смещения волны (ее значение задается в процентах относительно начальной фазы, равной 0).
В Примере представлено три вида объекта: (1) исходный объект без действия фильтра WAVE; (2) объект с действием фильтра WAVE и заданными свойствами strength=5, add=0, lightStrength=20; (3) объект с заданными свойствами strength=5, add=0, phase=50, lightStrength=20, freq=30. А листинг для этих трех примеров выглядит таким образом:
<img src=»flower.jpg»>
<img src=»flower.jpg» style=»filter: wave(strength=5, add=0, lightstrength=20)»>
<img src=»flower.jpg» style=»filter: wave(strength=5, add=0, phase=50, lightstrength=20, freq=30)»>
Фильтр alpha
О данном фильтре я уже упоминал в прошлом выпуске, когда рассматривал возможные способы получения эффекта MouseOver. Однако в прошлый раз речь шла только о свойстве opacity, определяющим степень прозрачности объекта. Помимо его, есть такие свойства, как style и finishOpacity. Свойство style может принимать значения от 0 до 3: нулевое значение соответствует степени прозрачности объекта согласно значению свойства opacity; style=1 задает координаты точек прямой, на которой степень прозрачности соответствует значению свойства finishOpacity; при style, равном 2, степень прозрачности изменяется от центра объекта к вымышленной окружности, спроецированной на блок отображения объекта (заданный отрезок от значения opacity до значения finishOpacity); если свойство style=3, прозрачность меняется от центра объекта к его границам.
Фильтр dropShadow
Этот фильтр создает сплошной силуэт объекта, смещенный в заданном направлении, и образует эффект тени. Кроме enabled, имеет следующие свойства: color (определение цвета тени); positive (выбор между тенью от прозрачных или непрозрачных точек объекта), offX и offY (расстояние в пикселях в вертикальной и горизонтальной плоскостях, на котором будет отображаться тень от исходного объекта: положительные значения offX и offY смещают тень, соответственно, вправо и вниз, отрицательные — влево и вверх.
Фильтр light
Данный фильтр имеет одно-единственное свойство enabled и несколько интересных методов, позволяющих варьировать способы освещения выбранного объекта. Метод addAmbient помещает над объектом источник рассеянного света и требует задания значений по шкале RGB и степени интенсивности наложения iStrength (от 0 до 255); метод addCone направляет на объект конический источник света и имеет следующие значения: координаты источника света iX1 и iY1, номер слоя iZ, координаты точки направления света iX2 и iY2, цветовая гамма по шкале RGB (iRed, iGreen, iBlue), интенсивность источника света iStrength и величина угла конуса источника света iAngle; метод addPoint имеет те же значения, что и addCone, кроме iX2 и iY2, и добавляет к объекту точечный источник света. Это наиболее популярные методы.
Код для этого примера включает небольшой JavaScript-сценарий, который нужно вставить в раздел HEAD:
<script language=»JavaScript»>
function lightFilter()
{
ambient.filters.light.addAmbient(255,0,0,255);
cone.filters.light.addCone(0,0,3,255,255,0,0,255,200,30);
}
</script>
В основной HTML-код добавляем идентификаторы графических изображений «ambient» и «cone» и указываем фильтр light, а также инициализируем функцию фильтра lightFilter() посредством события onload в разделе BODY:
<body onload=»lightFilter();»>
<img src=»flower.jpg» id=»ambient» style=»filter: light()»>
<img src=»flower.jpg» id=»cone» style=»filter: light()»>
</body>
Совместное применение нескольких фильтров
Динамический HTML позволяет использовать для одного объекта одновременно несколько фильтров. В этом случае запись фильтров идет через пробел с указанием параметров для каждого из применяемых фильтров. В Примере приведены примеры совместного использования нескольких фильтров: (1) wave(strength=10, add=0, phase=15, lightStrength=25) flipH() — фильтр wave без включения исходного объекта, с интенсивностью наложения 10, фазой смещения 15, трехмерным освещением, равным 25, и фильтр flipH, переварачивающий объект в горизонтальной плоскости; (2) gray() blur(strength=85, add=1, direction=45) — фильтр gray, убирающий цветовую гамму объекта, и фильтр blur, размывающий изображение, с интенсивностью наложения 85, добавлением исходного объекта и с направлением размытия в 45 градусов; (3) xray() alpha(opacity=255, style=2, finishOpacity=0) — фильтр xray, создающий эффект рентгеновского снимка и фильтр alpha со степенью прозрачности объекта 255 и свойством стиля 2 (от центра к воображаемой окружности).
Фильтр blendTrans
Среди общего числа фильтров динамического HTML есть два, позволяющие создавать эффекты анимационных переходов из одного состояния в другое — blendTrans и revealTrans. Разберем на примере первый из них. blendTrans имеет свойства duration (временной промежуток, за который фильтр должен перевести объект из исходного состояния в конечное), visibility (появление/исчезновение объекта) и status (определение состояния перехода). Чтобы реализовать действие этого фильтра, вставляем в раздел HEAD веб-документа небольшой скрипт:
<script language=»JavaScript»>
var runStart = 0
function runAnimation()
{
if (runStart == 0)
{
runStart = 1
img.filters.blendTrans.Apply();
img.src = «flower2.jpg»;
img.filters.blendTrans.Play();
}
}
</script>
Сразу же после него указываем идентификатор скрипта и событие фильтра:
<script for=»img» event=»onfilterchange»>
runStart = 0
</script>
где «var runStart = 0» — начальное значение переменной перехода; «function runAnimation()» — функция начала перехода;
«img.filters.blendTrans.Apply();» — указание метода Apply(), останавливающего анимационный переход;
«img.filters.blendTrans.Play();» — указание метода Play(), стартующего процесс перехода (инициализируется по щелчку мыши на объекте);
«img.src = «flower2.jpg»;» — путь ко второму объекту, соответствующему конечному состоянию перехода по фильтру blendTrans.
Далее в разделе BODY указываем путь к первому объекту (исходное состояние перехода), задаем параметры фильтра и определяем событие начала функции перехода:
<img src=»flower.jpg» id=»img» style=»filter: blendTrans(duration=3);» onclick=»runAnimation()»>
В результате после инициализации функции перехода (посредством щелчка мыши по исходному изображению) файл flower.jpg в течении трех секунд плавно перейдет в файл flower2.jpg. Далее сработает метод Apply(), приостанавливающий анимационный эффект, который будет отменен, если документ перезагрузить, снова запустив метод Play().
