|
|
Онлайн учебник по HTML и JAVASCRIPT Элементы языков HTML и JAVASCRIPTДинамические фильтры HTML Эффекты постепенного появления (исчезновения) графического
изображения и преобразования одной картинки в другую можно получить с
помощью совместного применения динамического фильтра и сценария (скрипта).
Разумное использование таких эффектов украшает Web-страницу. Есть несколько
способов преобразования. Эти способы заранее определены, поэтому от вас
лишь требуется указать номер выбранного способа. Ниже приведена таблица
с названиями и номерами превращений.
В следующем примере картинка с изображением карты мира постепенно становится видимой через открывающиеся вертикальные жалюзи. Картинка из файла word.gif сначала невидима (свойство visibility:hidden таблицы стилей). В теге <DIV> применен динамический фильтр revealtrans, управляющий появлением изображений. Сценарий содержит одну функцию dyn_filter (), которая применяет фильтр (метод apply ()), делает картинку видимой (свойству visibility присваивается значение «visible»), устанавливает тип преобразования (Transition=8) и задает длительность преобразования 2 с (методу play () передается числовой параметр 2). Далее определено, что эффект постепенного появления картинки начнется сразу же после загрузки страницы. Это достигается привязкой функции dyn_filter () к событию ONLOAD в теге<ВОDУ>. <HTML>
Рис. 671. Динамическое преобразование картинки с помощью фильтра «Вертикальные жалюзи» Заметим, что Image1— это имя (идентификатор) элемента-контейнера, заданного тегом <DIV>; контейнер содержит единственный элемент (картинку), но мы использовали его только затем, чтобы применить к нему метод applay (), который не поддерживается элементом, созданным тегом <IMG>; filters — коллекция всех фильтров, фильтр (единственный) указан номером в коллекции: Imagel.filters (0). Если в приведенной выше программе изменить тип преобразования, например,
на 3 (расширяющийся круг) путем замены в теле функции соответствующей
записи Image 1. filters (0) .Transition=3,
то получится такой эффект, как показано на следующем рисунке (картинка
постепенно появляется в расширяющемся круге):
Рис. 672. Динамическое преобразование
картинки с помощью фильтра «Расширяющийся круг»
При установке фильтра типа 12 возникает эффект постепенного
повышения разрешения изображения путем случайного заполнения пикселами
места, отведенного под картинку. Точки картинки постепенно выводятся на
экран в случайном порядке.
Тип преобразования 23 — случайный выбор и применение одного из имеющихся
типов (от 0 до 22). Вы заранее не можете угадать, какой именно фильтр
сработает, когда пользователь загрузит вашу страницу. <HTML> Попробуйте применить фильтр revealtrans,
управляющий появлением картинки, при различных значениях (0-23) параметра
transition, который задает тип преобразования.
Для этого можно использовать в качестве основы один из рассмотренных выше
текстов HTML-программы.
При создании динамических сцен может потребоваться переориентировать картинку
при изменении направления ее движения. Например, при изменении направления
движения самолета на противоположное следует развернуть его изображение
на 180°. Конечно, можно иметь две картинки с самолетом, на одной из которых
самолет летит направо, а на другой — налево. Тогда вам потребуется только
динамически изменять аргумент атрибута SRC
в теге <IMG>. Другой способ состоит
в том, чтобы две картинки поместить на одном и том же месте, но динамически
управлять их видимостью так, что в любой момент видна лишь одна картинка.
Наконец, можно просто применить соответствующий статический фильтр к одной
картинке. Попробуйте самостоятельно разработать эти сценарии.
|
|
|