Динамическое преобразование картинки с помощью фильтра «Вертикальные жалюзи»
Рисунок 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 STYLE1="posi t ion : absolute;
height : 200; width: 300; left: 10; top: 10; f ilter :
blendtrans ">
<IMG ID=I1 STYLE1="position:absolute;
height : 200; width: 300 ; visibility :
hidden" SRC=world. gif >
<H3 STYLE1="position:absolute; top:210">
Динамическое преобразование картинки с помощью фильтра
</НЗ>
</BODY>
</HTML>
Попробуйте применить фильтр revealtrans, управляющий появлением картинки, при различных значениях (0-23) параметра transition, который задает тип преобразования. Для этого можно использовать в качестве основы один из рассмотренных выше текстов HTML-программы.
При создании динамических сцен может потребоваться переориентировать картинку при изменении направления ее движения. Например, при изменении направления движения самолета на противоположное следует развернуть его изображение на 180°. Конечно, можно иметь две картинки с самолетом, на одной из которых самолет летит направо, а на другой — налево. Тогда вам потребуется только динамически изменять аргумент атрибута SRC в тэге <IMG>. Другой способ состоит в том, чтобы две картинки поместить на одном и том же месте, но динамически управлять их видимостью так, что в любой момент видна лишь одна картинка. Наконец, можно просто применить соответствующий статический фильтр к одной картинке. Попробуйте самостоятельно разработать эти сценарии.
