|
|
|
Графические фильтры Пожалуй, самой необычной возможностью технологии DHTML является использование
так называемых "графических фильтров". Это, по сути, некоторые
графические преобразования, которые могут быть применены избирательно
к любому элементу оформления Web-страницы. Изначально эти фильтры создавались
на основе элементов ActiveX, и, соответственно, наилучшим образом они
работают в браузере Microsoft Internet Explorer. Листинг 7.11 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> На рис. 7.11 видно, во что превратился рисунок gif-формата из двухсот
пятидесяти шести цветов после того, как пользователь щелкнул мышью на
графическом изображении. После этого щелчка к рисунку был применен статический
графический фильтр с наименованием "хгау", которое, очевидно,
указывает, что данный графичекий эффект имеет некоторое отношение к рентгеновским
лучам. И если посмотреть на рисунок, станет понятно, что доля истины в
этом названии есть, так как графическое изображение и в самом деле немного
походит на рентгеновские снимки.
Рис. 7.11. Окно браузера с результатом отображения файла, приведенного в листинге 7.11, после того как пользователь щелкнул мышью на рисунке Начнем с простых фильтров отражения. Фильтр с наименованием "fliph" задает горизонтальное отражение элемента. Код HTML-документа, в котором используется данный фильтр приведен в листинге 7.12. Листинг 7.12 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> Рис. 7.12. Окно браузера с результатом отображения файла, приведенного в листинге 7.12, после того как сработал графический фильтр Как видно, код документа не слишком отличается от предыдущего листинга.
Основное отличие — в механизме действия статического фильтра. Как легко
видеть на рис. 7.12, в процессе его применения к рисунку, тот был отражен
относительно вертикальной оси, проходящей через его центр. Листинг 7.13 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
Рис. 7.13. Окно браузера с результатом отображения файла, приведенного в листинге 7.13, после того как сработал графический фильтр Из приведенного кода HTML-документа становится ясно, данный статиче
ский фильтр носит наименование "flipv". А на рис. 7.13 видно,
что данньп фильтр отражает содежимое элемента Web-страницы по вертикали,
относи тельно горизонтальной оси элемента, проходящей через его центр. Листинг 7,14 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
Рис. 7.14. Окно браузера с результатом отображения файла, приведенного в листинге 7.14, после того как сработал графический фильтр Листинг 7.15 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> Рис. 7.15. Окно браузера с результатом отображения файла, приведенного в листинге 7.15, после того как сработал графический фильтр Фильтр invert был применен к графическому изображению. Данный фильтр
инвертирует, т. е. заменяет на противоположные, все цвета элемента, к
котором'у он применяется. На рис. 7.15, однако, видно, что был изменен
лишь цвет значимой части изображения, а фон остался неизмененным. Связано
это с тем, что применяющееся в данном случае графическое изображение было
сохранено в формате GIF, и фон его был обозначен как "прозрачный"
цвет. Эта уникальная фозможность присуща только данному формату. И при
применении фильтра invert всегда следует помнить, что прозрачный цвет
не поддается инвертированию. Листинг 7.16 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> Легко заметить, что для установки цвета, которым будет отображаться
создаваемая маска, мы используем параметр с наименованием color. Значением
параметра может быть любое принятое в HTML обозначение цвета. Если не
использовать дополнительный параметр для эффекта, то в качестве цвета
для создания маски будет использован черный цвет.
Рис. 7.16. Окно браузера с результатом отображения файла, приведенного в листинге 7.16, после того как сработал графический фильтр Листинг 7.17 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN
"http://www.w3.org/TR/html4/strict.dtd"> К сожалению, возможности полиграфии не позволяют показать результат применения данного фильтра в полном объеме. Но если все-таки есть желание увидеть его, стоит создать HTML-файл с кодом, приведенным в листинге 7.17, и загрузить его в браузер (рис. 7.17).
Рис. 7.17. Окно браузера с результатом отображения файла, приведенного в листинге 7.17, после того как сработал графический фильтр Легко заметить, что данный эффект обладает тремя дополнительными параметрами.
Параметр direction задает направление, в котором будет производиться смещение
изображения элемента. Значением данного параметра является число, обозначающее
количество градусов, отсчитываемых от вертикально направленной воображаемой
линии. Параметр strength позволяет указывать, насколько "наполненным"
будет смещенное отображение. Чем больше значение этого параметра, тем
дальше будет смещаться изображение. Значением параметра является обычное
целое число. Параметр add является логическим и указывает, следует ли
добавлять более слабые копии изображения в итоговый результат, создавая
подобным образом именно иллюзию движущегося элемента, или нет. Если мы
используем нулевое значение, то ослабленные копии добавляться не будут,
и мы просто получим достаточно сильно размазанное изображение. Чаще всего,
опознать в нем оригинал будет затруднительно. Поэтому обычно в качестве
значения данного параметра используется любое целое число. При этом не
имеет значение, какое число мы используем, лишь бы оно не было нулем,
так как, по сути, параметр является логическим. Листинг 7,18 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"> При помощи параметров графического фильтра мы можем управлять внешним видом изображения элемента, к которому данный фильтр применяется. Параметр offx и offy, как нетрудно догадаться, позволяют задавать смещение тени относительно исходного элемента по горизонтали и вертикали, соответственно. Для данных параметров, естественно, используются числовые значения. Параметр color задает цвет, которым будет отображаться тень. А параметр positive является логическим. В том случае, если ему присвоено ненулевое значение, или он вообще не установлен, тень будет отображаться в стандартном виде, как это показано на рис. 7.18. Иначе, тень будет инвертирована, и ее фон будет отображаться цветом, заданным при помощи параметра color, а само теневое изображение элемента будет отображаться цветом фона.
Рис. 7.18. Окно браузера с результатом отображения файла, приведенного в листинге 7.18, после того как сработал графический фильтр Применение еще одного достаточно интересного статического графического фильтра показано в листинге 7.19. Данный фильтр имеет наименование "glow", и позволяет создавать размазанный контур вокруг элемента, повторяя его контур. Листинг 7.19 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Рис. 7.19. Окно браузера с результатом отображения файла, приведенного в листинге 7.19, после того как сработал графический фильтр Легко заметить, что данный фильтр обладает двумя параметрами. Параметр
color позволяет указывать цвет, которым будет создаваться дополнительный
контур элемента, а параметр strength задает размер этого нового контура
и, косвенно, его размытость. Чем больше значение этого параметра, тем
больше дополнительный обтекающий контур у элемента (рис. 7.19). Листинг 7. 20 В качестве знаения основного параметра opacity используется числовое
значение от нуля до ста, указывающее процент прозрачности элемента. Если
используется нулевое значение, то элемент становится полностью прозрачным
и сливается с фоном, т. е. становится невидимым. Если же мы используем
значение, равное ста процентам, то внешний вид элемента не изменяется. Листинг 7. 21 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ' "http:
//www.w3.org/TR/html4/strict.dtd"> Рис. 7.20. Окно браузера с результатом отображения файла, приведенного в листинге 7.20, после того как сработал графический фильтр При помощи числового параметра freq мы задаем количество "волн"
в результирующем изображении. Чем больше значение этого параметра, тем
более "волнистым" окажется результат. А "высота" волн,
точнее, их горизонтальный размер задается при помощи числового параметра
strength. С действием параметра add мы уже знакомы. Если мы укажем для
него ненулевое значение, то вместе с результатом действия графического
фильтра будет отображает и'исходный элемент. Обычно этот вариант изображения
выглядит достаточно громоздко, поэтому чаще используют нулевое значение
для параметра add.
Рис. 7.21. Окно браузера с результатом отображения файла, приведенного в листинге 7.21, после того как сработал графический фильтр Итак, рассмотрим листинг. Листинг 7.22 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http: //www.w3.org/TR/html4/strict.dtd"> В теге HTML-документа мы создаем одну кнопку, установленную по центру
строки (рис. 7.22). Для нее устанавливаем отслеживаемое событие onMouseOver,
и приписываем ему выполнение функции lighting о. В самой функции мы работаем
с объектом т, который является телом документа. Мы используем его подчиненный
объект style и создаем для него графический фильтр light. При помощи этого
графического фильтра можно создавать различные световые эффекты. Затем
мы создаем переменную 1, которая становится первым (и единственным) экземпляром
коллекции filters. А для нее выполняем метод addPoint, который создает
точечный источник цвета. Первые три параметра этого метода содержат в
себе координаты х, у и z точечного источника света, следующие три — RGB-код
используемого цвета, а последний параметр — интенсивность света.
Рис. 7.22. Окно браузера с результатом отображения файла, приведенного в листинге 7.22, после того как сработал графический фильтр |
|
|
