|
div.main {margin-left: 20pt; margin-right: 20pt}
Фильтры DHTML – чудо, павшее жертвой
несовместимости
Часть II. Динамические фильтры, или
Переходы
Помимо статических фильтров, подробно описанных в первой
части статьи, для браузеров Internet Explorer 4.0 и выше
существует два динамических фильтра, которые позволяют
задавать переход объекта из одного состояния в другое. Именно
поэтому второе их название – переходы. Обращение к ним в
объектной модели DHTML осуществляется через коллекцию filters.
Так же, как и фильтр light, переходы применяются различными
способами, и поэтому для их использования недостаточно
указывать название фильтра в теге или атрибуте style. Для
применения переходов к объектам на странице необходим сценарий
на языке JavaScript.
Переход blendTrans
Переход blendTrans позволяет задать постепенное проявление
или исчезновение объекта путем изменения его прозрачности.
Параметры этого фильтра – duration (время в секундах, в
течение которого переход осуществляется полностью) и status
(этот параметр доступен только из сценариев и позволяет
определить и изменить состояние перехода на текущий момент
выполнения сценария). Возможные значения параметра status: 0 –
переход остановлен (или еще не началось его выполнение), 1 –
применение перехода завершено и 2 – переход в процессе
применения.
Значения параметров можно изменять и в процессе выполнения
сценария с помощью методов перехода. Методов всего три: Play
(начать выполнение перехода), Apply (временно приостановить
выполнение перехода для переназначения параметров) и Stop
(полностью остановить выполнение перехода). С помощью
комбинаций методов можно создавать сложные динамические
эффекты, полностью зависящие от конкретных действий
посетителей вашей странички.
По умолчанию переход blendTrans задает постепенное
исчезновение объекта, к которому он применен. Переход должен
вызываться из сценария в ответ на загрузку страницы (событие
onLoad объекта body) или в ответ на какое-либо действие
посетителя (события onClick, onMouseOver и т. п.). Вот код
простейшего сценария, вызываемого при щелчке мышкой по
картинке: после щелчка изображение постепенно (в течение 15
секунд – значение параметра duration) исчезает, как бы
«растворяется» на экране: <html>
<head><title>Переход blendTrans</title>
<script language="JavaScript">
function transitionBlend() {
img1.filters.blendTrans.Play();
}
</script>
</head>
<body>
<img src="img.gif" id="img1"
style="filter: blendTrans(duration=15);"
onclick="transitionBlend();">
</body>
</html>
Этот сценарий очень прост, в нем задействован только метод
Play, поэтому при повторном щелчке мышкой по визуально
«опустевшей» области изображения картинка вновь моментально
появится на экране и тут же снова начнет постепенно исчезать.
Для того чтобы заставить изображение постепенно
«проявиться» из пустоты, придется помимо фильтра задействовать
свойство объекта visibility. Помимо самой картинки добавим на
страничку кнопку «Показать!», после нажатия которой будет
постепенно проявляться наша картинка, а самой картинке зададим
по умолчанию visibility: hidden. Сценарий при этом должен
начинаться с метода Apply, благодаря чему мы как бы
«объясняем» браузеру, что изображение невидимо при
приостановленном выполнении перехода. Если пропустить этот
метод, то изображение моментально появится на странице после
нажатия кнопки «Показать!». Сценарий теперь будет выглядеть
так: <html>
<head><title>Переход blendTrans</title>
<script language="JavaScript">
function transitionBlend() {
img1.filters.blendTrans.Apply();
img1.filters.blendTrans.Play();
img1.style.visibility = "visible";
}
</script>
</head>
<body>
<img src="img.gif" id="img1"
style="filter: blendTrans(duration=15);
visibility: hidden;">
<br><input type="button" value="Показать!"
onclick="transitionBlend();">
</body>
</html>
На рис. 1 приведены три «моментальных снимка» внешнего вида
страницы: до начала выполнения перехода (до нажатия на кнопку
«Показать!»), в процессе перехода и после его завершения.
При желании вы можете добавить в сценарий строчку,
убирающую с экрана кнопку «Показать!» после появления
изображения или заменяющую эту кнопку на новую, которая будет
управлять уже постепенным исчезновением картинки с помощью
методов DHTML innerHTML или outerHTML.
Переход revealTrans
Переход revealTrans еще интереснее, чем blendTrans, С его
помощью можно менять один объект на другой, используя 24
разных визуальных эффекта. Тип визуального эффекта задается
параметром transition, которому и присваивается
соответствующее числовое значение от 0 до 23. Описание этих
значений приводится на врезке.
Простейший код сценария для revealTrans несколько
отличается от кода для blendTrans: так как для выполнения
перехода необходимы, как минимум, два объекта – исчезающий и
проявляющийся, второй объект должен быть указан в теле
сценария. Вот пример простейшего кода для выполнения такого
перехода на странице в ответ на щелчок мышкой по картинке:
<html>
<head><title>Переход revealTrans</title>
<script language="JavaScript">
function transitionReveal() {
img1.filters.revealTrans.Apply();
img1.src = "img2.gif"
img1.filters.revealTrans.Play();
}
</script>
</head>
<body>
<img src="img1.gif"
width="100" height="100" border="0" id="img1"
style="filter: revealTrans(duration=10,transition=8);"
onclick="transitionReveal();">
</body>
</html>
На рис. 2 вы видите примеры различных типов перехода
revealTrans. Код сценария для разных типов, как уже
упоминалось, отличается только одной цифрой – значением
параметра transition в описании фильтра в атрибуте style.
В статье «Macromedia Extensions: запчасти от сторонних
производителей», опубликованной в мартовском номере журнала, я
рассказывала о расширении для Dreamweaver под названием Banner
Image Builder. Внимательные читатели, наверное, уже
догадались, что сценарии, создаваемые автоматически этим
приложением, используют различные переходы revealTrans для
эффектной смены картинок на страничке. Если вы немного
пофантазируете, то сможете найти еще множество различных
способов применения как статических фильтров, так и переходов
для «оживления» ваших страниц.
В завершение хотелось бы напомнить, что переходы, как и
статические фильтры, поддерживаются только браузерами Internet
Explorer 4.0 и выше. Обладатели браузеров Netscape Navigator и
Opera увидят лишь статические картинки, прописанные
непосредственно в теле страницы.
Людмила Бандурина,
blv@elsite.ru
| 
