На этом шаге мы рассмотрим способы доступа к статическим фильтрам.
Непосредственный доступ к статическим фильтрам производится двумя способами:
- через объявление в CSS-таблицах, либо
- с использованием скриптов.
Следующий пример демонстрирует первый способ:
<HTML>
<HEAD>
<TITLE>Пример фильтра</TITLE>
<STYLE TYPE="text/css">
<!--
.xr {FILTER: Xray();}
-->
</STYLE>
</HEAD>
<BODY>
<IMG SRC="ris34_1.jpgf" CLASS="xr">
</BODY>
</HTML>
Результат применения фильтра изображен на рисунке 2, а рисунок 1 содержит исходное изображение.
Рис.1. Исходное изображение
Рис.2. Результат использования фильтра
Результатом просмотра данного HTML-документа в браузере станет отображение содержимого файла ris34_1.jpg (рисунок 2) таким образом, будто он сделан с помощью рентгеновского аппарата. Прокомментируем приведенный текст. В CSS-таблице мы определяем стилевой класс xr, в содержании которого всего одна строка FILTER: Xray(), которая объявляет сам фильтр рентгеновского эффекта xray. Далее, в самом документе изображение ris34_1.jpg подводится под класс xr.
Важно отметить, что в классе xr может находиться несколько объявлений фильтров. Таким образом, появляется возможность применять к одному изображению несколько графических фильтров, так, например, если бы класс xr выглядел следующим образом:
xr {FILTER: FlipV() Xray();}
то изображение ris34_1.jpg подверглось бы не только вышеописанным изменениям, но и было бы перевернуто вверх ногами, в результате применения соответствующего фильтра FlipV.
Данные преобразования можно было бы сделать и без участия CSS-таблиц, а реализовав, например, скрипт на языке JavaScript. Следующий пример демонстрирует второй способ доступа к статическим графическим фильтрам в HTML:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="Javascript">
<!--
function change()
{
document.all.image_1.style.filter="xray()";
}
//-->
</SCRIPT>
</HEAD>
<BODY ONLOAD="change()">
<IMG ID="image_1" SRC="ris34_1.jpg" CLASS="xr">
</BODY>
</HTML>
Опишем работу этого примера. В заголовке документа между тэгами <HEAD> и </HEAD> определяется скрипт, внутри которого происходит объявление фильтра xray и его привязка к изображению с идентификатором image_1. Непосредственная активизация фильтра происходит при помощи свойства style.filter, принадлежащего каждому объекту, содержащему графическое изображение. В теле тэга <BODY> происходит непосредственный вызов функции change(), при помощи события onLoad(), которое вызывается после загрузки страницы. Теперь непосредственно рассмотрим, как вызывается фильтр в этом примере. Первым делом мы обращаемся к объекту document, который представляет собой Web-страницу. Далее мы обращаемся к коллекции all, дающей нам доступ ко всем следующим объектам в иерархии: ссылкам, блокам текста, изображениям и т.д. Далее мы указываем идентификатор того объекта, к которому будет применено действие. Теперь осталось определить фильтр, что и происходит при использовании конструкции style.filter. Преимуществ у такого подхода несколько. Во-первых, фильтрацию изображения теперь можно проводить не только при загрузке, но и в ответ на какие-то действия пользователя. Например, если убрать из тэга <BODY> событие onLoad() и изменить тэг <IMG> следующим образом
<IMG ONMOUSEOVER="change()" ID="image_1" SRC="ris34_1.jpg">,
то вышеописанные изменения будут происходить с изображением при наведении на него курсора мыши.
Следующий рисунок иллюстрирует эту возможность.
Рис.3. Иллюстрация использования фильтра при наведении курсора мыши
На следующем шаге мы приведем перечень статических фильтров.
