Динамические фильтры
Эффекты постепенного появления (исчезновения) графического
изображения и преобразования одной картинки в другую можно получить с
помощью совместного применения динамического фильтра и сценария (скрипта).
Разумное использование таких эффектов украшает Web-страницу. Есть несколько
способов преобразования. Эти способы заранее определены, поэтому от вас
лишь требуется указать номер выбранного способа. Ниже приведена таблица
с названиями и номерами превращений.
| Тип превращения |
Номер фильтра |
| Стягивающийся прямоугольник |
0 |
| Расширяющийся прямоугольник |
1 |
| Стягивающийся круг |
2 |
| Расширяющийся круг |
3 |
| Стирание вверх |
4 |
| Стирание вниз |
5 |
| Стирание вправо |
6 |
| Стирание влево |
7 |
| Вертикальные жалюзи |
8 |
| Горизонтальные жалюзи |
9 |
| Сужающиеся клетки |
10 |
| Закрывающаяся шахматная доска |
11 |
| Случайный наплыв |
12 |
| Вертикальное деление внутрь |
13 |
| Вертикальное деление наружу |
14 |
| Горизонтальное деление внутрь |
15 |
| Горизонтальное деление наружу |
16 |
| Стирание влево вниз |
17 |
| Стирание влево вверх |
18 |
| Стирание вправо вниз |
19 |
| Стирание вправо вверх |
20 |
| Случайные горизонтальные полосы |
21 |
| Случайные вертикальные полосы |
22 |
| Случайный выбор номера (из диапазона 0-22) |
23 |
В следующем примере картинка с изображением карты мира
постепенно становится видимой через открывающиеся вертикальные жалюзи.
Картинка из файла word.gif сначала невидима (свойство visibility:hidden
таблицы стилей). В тэге <DIV> применен
динамический фильтр revealtrans, управляющий
появлением изображений. Сценарий содержит одну функцию dyn_filter
(), которая применяет фильтр (метод apply
()), делает картинку видимой (свойству visibility
присваивается значение «visible»), устанавливает тип преобразования
(Transition=8) и задает длительность преобразования 2 с (методу play
() передается числовой параметр 2). Далее определено, что эффект
постепенного появления картинки начнется сразу же после загрузки страницы.
Это достигается привязкой функции dyn_filter ()
к событию ONLOAD в тэге<ВОDУ>.
<HTML>
<HEAD> <TITLE> Динамический фильтр </TITLE>
<SCRIPT >
function dyn fliter () {
Imagel . filters (0) . apply ()
I1 . style .visibility" visible" Imagel . filters (0) .Transition=8
Imagel .filters (0) .play(2)
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="dyn_filter () ">
<DIV ID=Imagel STYLE="position: absolute;
height: 2 00; width: 300; left: 10; top : 10; filter : reveal trans">
<IMG ID=I1 STYLE="position:absolute; '
height : 200; width: 300; visibility : hidden" SRC=world. gif >
<H3 STYLE= "posit ion: absolute; top:210">
Динамическое преобразование картинки с помощью фильтра </НЗ>
</BODY>
</HTML>
Рис. 671. Динамическое преобразование картинки с помощью
фильтра «Вертикальные жалюзи»
Заметим, что Image1— это
имя (идентификатор) элемента-контейнера, заданного тэгом <DIV>;
контейнер содержит единственный элемент (картинку), но мы использовали
его только затем, чтобы применить к нему метод applay
(), который не поддерживается элементом, созданным тэгом
<IMG>; filters — коллекция
всех фильтров, фильтр (единственный) указан номером в коллекции:
Imagel.filters (0).
Если в приведенной выше программе изменить тип преобразования,
например, на 3 (расширяющийся круг) путем замены в теле функции соответствующей
записи Image 1. filters (0) .Transition=3,
то получится такой эффект, как показано на следующем рисунке (картинка
постепенно появляется в расширяющемся круге):
Рис. 672. Динамическое преобразование картинки с помощью
фильтра «Расширяющийся круг»
При установке фильтра типа 12 возникает эффект постепенного
повышения разрешения изображения путем случайного заполнения пикселами
места, отведенного под картинку. Точки картинки постепенно выводятся на
экран в случайном порядке.
Тип преобразования 23 — случайный выбор и применение одного
из имеющихся типов (от 0 до 22). Вы заранее не можете угадать, какой именно
фильтр сработает, когда пользователь загрузит вашу страницу.
Следующая программа аналогична рассмотренной выше, но в
ней применяется другой фильтр (blendtrans),
который создает эффект постепенного повышения яркости и насыщенности изображения.
Этот фильтр имеет только один параметр — продолжительность преобразования
(duration). Обратите внимание, что новая программа получилась из предыдущей
путем замены двух строк.
<HTML>
<HEAD> <TITLE> Динамический фильтр </TITLE>
<SCRIPT>
function dyn_filter(){
Imagel.filters(0).Apply()
II . style.visibility="visible"
Imagel.filters (0) .play (2)
</SCRIPT>
</HEAD>
<BODY ONLOAD="dyn_f liter ()">
<DIV ID=Imagel STYLE="posi t ion : absolute;
height : 200; width: 300; left: 10; top: 10; f ilter :
blendtrans ">
<IMG ID=I1 STYLE="position:absolute;
height : 200; width: 300 ; visibility :
hidden" SRC=world. gif >
<H3 STYLE="position:absolute; top:210">
Динамическое преобразование картинки с помощью фильтра
</НЗ>
</BODY>
</HTML>
Попробуйте применить фильтр revealtrans,
управляющий появлением картинки, при различных значениях (0-23) параметра
transition, который задает тип преобразования.
Для этого можно использовать в качестве основы один из рассмотренных выше
текстов HTML-программы.
При создании динамических сцен может потребоваться переориентировать
картинку при изменении направления ее движения. Например, при изменении
направления движения самолета на противоположное следует развернуть его
изображение на 180°. Конечно, можно иметь две картинки с самолетом, на
одной из которых самолет летит направо, а на другой — налево. Тогда вам
потребуется только динамически изменять аргумент атрибута SRC
в тэге <IMG>. Другой способ состоит в
том, чтобы две картинки поместить на одном и том же месте, но динамически
управлять их видимостью так, что в любой момент видна лишь одна картинка.
Наконец, можно просто применить соответствующий статический фильтр к одной
картинке. Попробуйте самостоятельно разработать эти сценарии.
|
