Графические фильтры
Рис. 7.19. Окно браузера с результатом отображения файла, приведенного в листинге 7.19, после того как сработал графический фильтр
Легко заметить, что данный фильтр обладает двумя параметрами. Параметр color позволяет указывать цвет, которым будет создаваться дополнительный контур элемента, а параметр strength задает размер этого нового контура и, косвенно, его размытость. Чем больше значение этого параметра, тем больше дополнительный обтекающий контур у элемента (рис. 7.19).
При помощи фильтра "alpha" мы можем устанавливать уровень прозрачности для того или иного элемента. Пример использования данного фильтра показан в листинге 7.20 и рис. 7.20.
Листинг 7.20
<!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 filtering() { document.all.p1.style.filter = "alpha(opacity=40)"; } //--> </script></head> <body> <p> <img id="p1" src="htm.gif " onClick="filtering()"> </p></body> </html>В качестве значения основного параметра opacity используется числовое значение от нуля до ста, указывающее процент прозрачности элемента. Если используется нулевое значение, то элемент становится полностью прозрачным и сливается с фоном, т. е. становится невидимым. Если же мы используем значение, равное ста процентам, то внешний вид элемента не изменяется.
Одним из самых интересных фильтров является фильтр "wave", накладывающий на объект волнообразное преобразование. Его применение проиллюстрировано листингом 7.21 и рис. 7.21.
Листинг 7.21
<!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 filtering() { document.all.p1.style.filter = "wave(freq=3, strength=5, add=0)"; } //--> </script></head> <body> <p> <img id="p1" src="htm.gif" onClick="filtering()"> </p></body> </html>