Графические фильтры
Рис. 7.20. Окно браузера с результатом отображения файла, приведенного в листинге 7.20, после того как сработал графический фильтр
При помощи числового параметра freq мы задаем количество "волн" в результирующем изображении. Чем больше значение этого параметра, тем более "волнистым" окажется результат. А "высота" волн, точнее, их горизонтальный размер задается при помощи числового параметра strength. С действием параметра add мы уже знакомы. Если мы укажем для него ненулевое значение, то вместе с результатом действия графического фильтра будет отображает исходный элемент. Обычно этот вариант изображения выглядит достаточно громоздко, поэтому чаще используют нулевое значение для параметра add.
И последний рассматриваемый нами статический фильтр носит наименование "light". Он позволяет создавать эффекты освещения элемента различными источниками света, и его стоит рассмотреть несколько подробнее, так как он позволяет использовать несколько различных методов. Мы создадим Web-страницу с одной кнопкой, расположенной по центру строки, и установим реакцию на попадание курсора мыши на нее. В этом случае мы создадим иллюзию возникновения точечного освещения, источник которого будет находиться почти точно над кнопкой. Таким образом, мы сможем акцентировать внимание удаленного пользователя на этой кнопке. Естественно, вместо кнопки можно установить любой другой элемент Web-страницы.
Рис. 7.21. Окно браузера с результатом отображения файла, приведенного в листинге 7.21, после того как сработал графический фильтр
Итак, рассмотрим листинг.
Листинг 7.22
<!DOCTYPE
HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"
>
<
html
>
<
head
>
<
title
>
Графические фильтры
<
/
title
>
<
script
language
=
"javascript"
>
//<!--
function
lighting() {
m.style.filter
=
"light"
;
l
=
m.filters[
0
];
l.addPoint(
250
,
50
,
150
,
60
,
230
,
60
,
10000
);
}
// -->
<
/
script
>
<
/
head
>
<
body
id
=
"m"
>
<
p
align
=
"center"
>
<
input
type
=
"button"
value
=
"КНОПКА"
name
=
"BUT1"
onMouseOver
=
"lightin()"
>
<
/
p
>
<
/
body
>
<
/
html
>