Иллюстрированный самоучитель по Web-графике

Динамические фильтры

Эффекты постепенного появления (исчезновения) графического изображения и преобразования одной картинки в другую можно получить с помощью совместного применения динамического фильтра и сценария (скрипта). Разумное использование таких эффектов украшает 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>
Если Вы заметили ошибку, выделите, пожалуйста, необходимый текст и нажмите CTRL + Enter, чтобы сообщить об этом редактору.