Динамические фильтры
Эффекты постепенного появления (исчезновения) графического изображения и преобразования одной картинки в другую можно получить с помощью совместного применения динамического фильтра и сценария (скрипта). Разумное использование таких эффектов украшает 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
=
"position: absolute; top:210"
>
<
/
H3
>
<
/
BODY
>
<
/
HTML
>