Техника Web-дизайна для студента
Примеры использования динамических фильтров
Одновременное использование нескольких фильтров применительно к различным изображениям
Сформулируем задачу следующим образом. В момент загрузки страницы начинают появляться три изображения с использованием разных эффектов, а через 3 с возникают еще три, также с использованием разных эффектов. В реальной ситуации, возможно, и не потребуется воспроизводить каждый рисунок со своим эффектом, но в данном примере важно показать, как реализовать такие возможности, применив при этом только одну функцию для управления фильтром (листинг 9.6).
Листинг 9.6. Пример одновременного применения различных фильтров к нескольким изображениям
<HTML>
<HEAD>
<TITLE>npMMepl</TITLE>
<script> function pr()
{
Prl (picl) prl(pic2) prl (pic3)
SetTimeout("prl(pic4)", 3000) setTimeout("prl(pic5)", 3000) setTimeout("prl(pic6)", 3000)
}
Function prl(pic)
{
Pic. style. visibility="hidden"
Pic. filters[0].apply()
Pic. filters[0].play()
Pic. style. visibility="visible"
}
</script>
</HEAD>
<BODY onload = pr()>
<IMG ID=picl SRC="1.jpg" width=100 style="position:absolute;
Left:30; top:10; filter: progid: DXImageTrans-
Form. Microsoft. Stretch (stretchstyle=spin, duration=3)">
<IMG ID=pic2 SRC="2.jpg" width=100 style="position:absolute; left:80; top:70; filter: progid: DXImageTrans- form. Microsoft. GradientWipe (GradientSize=0, wipestyle=l, mo - tion=reverse, duration=3)">
<IMG ID=pic3 SRC="3.jpg" width=100 style="position:absolute; left:5; top:150; filter:
Progid:DXImageTransform. Microsoft. Strips (motion=rightup, du - ration=3)">
<IMG ID=pic4 SRC="4.jpg" width=100 style="position:absolute; left:250; top:70;visibility:hidden; filter: progid:DXImageTransform. Microsoft. RandomDissolve (dura - tion=3)" >
<IMG ID=pic5 SRC="5.jpg" width=100 style="position:absolute;
Left:170; top:20; visibility:hidden; filter:
Progid:DXImageTransform. Microsoft. Checkerboard (direction=right, SquaresX=5, SquaresY=5, duration=3)">
<IMG ID=pic6 SRC="6.jpg" width=100 style="position:absolute; left:170; top:170; visibility:hidden; filter: progid:DXImageTransform. Microsoft. Iris(irisstyle=cross, mo - tion=out, duration=3)">
</BODY>
</HTML>
Чтобы осуществить многократный вызов функции pr 1 () с различными значениями параметра, создана вспомогательная функция рг (), в которой вызов функции pr 1 () с именами объектов picl, pic2, pic3 осуществляется непосредственно, а с именами pic4, pic5, pic6 — через метод setTimeOuto с задержкой 3 с. В свою очередь, вызов функции рг () осуществляется при загрузке документа. В верхней строке функции prl () предусмотрено скрытие объекта (pic. style. visibility="hidden") с тем, чтобы в дальнейшем он появился с заданным эффектом (pic. style. visibiiity="visibie"). Так как выполнение функции prl () связано с загрузкой документа, то пользователь не заметит скрытия объектов picl, pic2, pic3, а увидит только их постепенное появления с использованием эффекта. Что же касается объектов pic4, pic5 и pic6, то для них необходимо предусмотреть предварительное скрытие, что и сделано в метках <img> соответствующих объектов. В противном случае они в течение 3 с находились бы на экране, после чего были бы скрыты и появились вновь с применением эффекта.
Очередное изображение выбирается из списка, включающего более двух изображений в произвольном порядке, и появляется на фоне предыдущего с применением эффекта. Повторный выбор уже установленного изображения не должен приводить ни к каким изменениям.
Изображения предварительно должны быть приведены к одному размеру, например путем масштабирования и обрезки. После этого к ним можно применить одинаковое абсолютное позиционирование, в результате чего будет видимым только одно изображение (листинг 9.7).
Листинг 9.7. Пример выбора изображения в произвольном порядке с применением динамического эффекта
<html>
<head>
<title>npMMep 2</title>
</head>
<script> var z=0
Function prl(pic)
If (pic. style. zlndex!= z-1)
Pic. style. visibility="hidden"
Pic. filters[0].Apply()
Pic. style. zlndex=z
Pic. filters [0] . PlayO
Pic. style. visibility="visible"
</script>
<body>
<ul>
<lixbxfont size="5" onclick=prl (picl) >Рисунок 1</ f ontx/b>< /1 i>
Clixbxfont size="5" onclick=prl (pic2) >Рисунок 2</fontx/bx/li>
<lixbxfont size="5" onclick=prl (pic3) >Рисунок 3</ f ontx/bx /1 i>
<lixbxfont size="5" onclick=prl (pic4) >Рисунок 4 </ f ontx/bx /1 i>
</ul>
<img id=picl style="position: absolute; left: 180; top: 16;
Filter: progid:DXImageTransform. Microsoft. Blinds (bands=8, direction=left, duration=3); visibility: visible"
Src="l. jpg">
<img id=pic2 style="position: absolute; left: 180; top: 16;
Filter: progid:DXImageTransform. Microsoft. Blinds (bands=8, direction=left, duration=3); visibility: hidden"
Src="2.jpg">
<img id=pic3 style="position: absolute; left: 180; top: 16;
Filter: progid:DXImageTransform. Microsoft. Blinds (bands=8, direction=left, duration=3); visibility: hidden"
Src="3.jpg">
<img id=pic4 style="position: absolute; left: 180; top: 16;
Filter: progid:DXImageTransform. Microsoft. Blinds (bands=8, direction=left, duration=3); visibility: hidden"
Src="4.jpg">
</body>
</html>
После загрузки документа видимым будет изображение picl, для которого задано visibility: visible, остальные изображения скрыты (visibility: hidden).
Перемещение выбранного изображения поверх остальных осуществляется путем изменения слоя, в котором оно располагается. Для этой цели используется свойство z-index каскадной таблицы стилей. Объект, имеющий СВОЙСТВО Z-index больше остальных объектов, располагается поверх этих объектов. По умолчанию свойство z-index объекта равно нулю. Переменная z — счетчик, предназначенный для увеличения свойства z-index демонстрируемого объекта. При каждом вызове функции prl () переменная z увеличивается на единицу. Условие pic. style. zindex!= z-l проверяет, является ли активизируемый объект новым или он стал видимым на предыдущем шаге. Появиться с применением эффекта может только скрытый объект, поэтому в случае выполнения условия объект скрывается.
Далее метод Apply о зафиксирует изображение. Свойству z-index объекта присваивается новое значение и объект появляется с применением эффекта поверх остальных изображений. Если же условие не выполняется, то это означает, что осуществляется попытка активизировать уже видимый объект. Такой объект не будет скрыт и, следовательно, изменения изображения не произойдет.
Изображения демонстрируются одно за другим в заданной последовательности
Нажатие кнопки "Вперед" ведет к появлению следующего по порядку изображения, а кнопки "Назад" — предыдущего.
Подготовка и размещение изображений осуществляется так же, как и в предыдущем примере. Добавляются две кнопки и две функции: ргго — вызывается при нажатии на кнопку "Вперед" и ргн () — вызывается при нажатии на кнопку "Назад" (листинг 9.8).
<html>
<head>
<title>npMMep 3</title>
</head>
<script> var z=0
Var kol=4 //общее число рисунков var k=0 function prF()
If (k<kol-l)
K++ pr ()
Function prR()
If (k>0)
K— pr ()
|
Z++ Document Document Document Document Document |
|
Function рг( |
 |
images[k].style. visibility="hidden" images[k].style. zlndex=z images[k].filters[0].Apply() images[k].filters[0].Play() images[k].style. visibility="visible"
</script>
<body>
<img id=picl style="position: absolute; left: 180; top: 16; filter:
Progid:DXImageTransform. Microsoft. RadialWipe(wipestyle=clock, duration=3); visibility: visible"
Src="l. jpg">
<img id=pic2 style="position: absolute; left: 180; top: 16; filter:
Progid:DXImageTransform. Microsoft. RadialWipe(wipestyle=clock, duration=3); visibility: hidden"
Src="2.jpg">
<img id=pic3 style="position: absolute; left: 180; top: 16; filter:
Progid:DXImageTransform. Microsoft. RadialWipe(wipestyle=clock, duration=3); visibility: hidden"
Src="3.jpg">
<img id=pic4 style="position: absolute; left: 180; top: 16; filter:
Progid:DXImageTransform. Microsoft. RadialWipe(wipestyle=clock, duration=3); visibility: hidden"
Src="4.jpg">
<span style="position: absolute; left: 63; top: 111">
<input type="button" value="Вперед" name="B3" on - click=prF()>
</span>
<span style="position: absolute; left: 68; top: 179">
Cinput type="button" value="Назад" name="B3" on - click=prR()>
</span>
</body>
</html>
В программе используются три переменные. Назначение переменной z, как и в предыдущем примере, — увеличение свойства z-index демонстрируемого объекта. Переменная kol — количество используемых рисунков. При желании изменить количество рисунков достаточно изменить значение этой переменной. Переменная к — счетчик, определяющий порядковый номер активного рисунка. Назначение функции prF() — увеличение на единицу значения переменной к при каждом вызове функции до тех пор, пока не будет достигнуто максимального значения koi-
1 (нумерация рисунков ведется от 0). В этом случае значением выражения k<koi-l станет faise и изменение переменной к прекратится. На практике это означает, что повторные нажатия кнопки "Вперед" после появления последнего рисунка, не будут приводить ни к каким изменениям. В случае изменения переменной к вызывается на выполнение функция рг ( ). Функция prR ( ) предназначена для уменьшения на единицу значения переменной к и вызова функции рг() после нажатия кнопки "Назад" до тех пор, пока не будет показан рисунок с номером 0, т. е. значение условия к>0 не станет faise. Назначение функции рг ( ) аналогично назначению функции prl() из предыдущего примера, за исключением того, что в ней отсутствует проверка на новизну объекта, так как она может быть вызвана только при изменении номера рисунка. В отличие от предыдущего примера, переход к новому объекту осуществляется путем выбора рисунка с заданным порядковым номером к из семейства рисунков document. images[k].
Демонстрация изображений в заданной последовательности с использованием одной кнопки
Как и в предыдущем случае, изображения демонстрируются в определенной последовательности, но для этого используется только одна кнопка, на которой надпись "Вперед" меняется на надпись "Назад" при достижении последнего изображения и вновь восстанавливается надпись "Вперед" при завершении перехода от последнего изображения к первому.
В отличие от предыдущих примеров, замена изображения осуществляется при любом нажатии кнопки. Появилась новая переменная shag, которая принимает значения: 1 — осуществляется переход в направлении увеличения порядкового номера рисунка, — 1 — уменьшение порядкового номера рисунка. При достижении максимального номера переменная shag изменяет значение на — 1, а кнопка приобретает надпись "Назад". При достижении минимального номера — переменная shag становится равной 1, а на кнопке появляется надпись "Вперед". Для изменения надписи на кнопке используется свойство value объекта KN1. Текст документа с программой приведен в листинге 9.9.
Листинг 9.9. Пример демонстрации изображений в заданной последовательности с использованием одной кнопки
<HTML>
<HEAD>
<Т1ТЪЕ>Пример4 < /TITLE>
<SCRIPT> var z=0
Var kol=4 //общее число рисунков var k=0 var shag=l function prD()
K+=shag pr () if (k==0)
KN1.value="Вперед" shag=l
If (k==kol-l)
KN1.value="Hasan"
Shag=-l
Function pr(
|
Z++ Document Document Document Document Document |
|
Images [k; images [k; images [k; images [k; images [k; |
.style. visibility="hidden"
.style. zlndex=z. filters [0] .Apply ()
. filters [0] . PlayO .style. visibility="visible"
</SCRIPT>
</HEAD>
<BODY>
<img id=picl style="position: absolute; left: 180; top: 16; filter:
Progid:DXImageTransform. Microsoft. RadialWipe(wipestyle=clock, duration=3); visibility: visible"
Src="l. jpg">
<img id=pic2 style="position: absolute; left: 180; top: 16; filter:
Progid:DXImageTransform. Microsoft. RadialWipe(wipestyle=clock, duration=3); visibility: hidden"
Src="2.jpg">
<img id=pic3 style="position: absolute; left: 180; top: 16; filter:
Progid:DXImageTransform. Microsoft. RadialWipe(wipestyle=clock, duration=3); visibility: hidden"
Src="3.jpg">
<img id=pic4 style="position: absolute; left: 180; top: 16; filter:
Progid:DXImageTransform. Microsoft. RadialWipe(wipestyle=clock, duration=3); visibility: hidden"
Src="4.jpg">
<SPAN style="position: absolute; left: 63; top: 111">
<INPUT name=KNl onclick=prD() type=button value=Bnepefl>
</BODY>
</HTML>
Функция prD () предназначена для увеличения или уменьшения порядкового номера рисунка на 1 в зависимости от значения переменной shag и вызывается при нажатии кнопки. Кроме того, в ней осуществляются проверки достижения первого и последнего порядковых номеров рисунков с целью изменения переменной shag и надписи на кнопке, а также вызов функции рг (). Функция рг () аналогична используемой в предыдущем примере.
Рис. 3.12. Панель параметров инструмента Туре
Необходимые установки параметров текста можно производить как до набора текста, так и после его завершения. В последнем случае текст должен быть предварительно выделен.
Особое внимание следует обратить на выбор гарнитуры шрифта в раскрывающемся списке Set the font family (Установка гарнитуры шрифта) панели параметров. Дело в том, что не все гарнитуры позволяют работать с кириллицей, поэтому перед набором русского текста нужно выбрать гарнитуру, дающую такую возможность. Например: Arial, Comic Sans MS, Courier New и др.
Кроме списка гарнитур, на панели параметров располагаются:
О кнопка переключения горизонтальный/вертикальный текст Change the text orientation (Изменить ориентацию текста);
О раскрывающийся список Set the font style (Установка начертания шрифта). Для гарнитуры Arial этот список содержит:
[1] Неразрывный пробел называется так потому, что слова, между которыми он находится, не могут быть разнесены браузером на разные строки, и если не будут помещаться на одной строке, то будут перенесены вместе. Поэтому его, в частности, можно использовать для разделения величины и единицы измерения. Например: 120&пЬзр;км/час.
[2] Regular — обычный шрифт;
• Bold — полужирный;
• Italic — курсив;
• Bold Italic — полужирный и курсив.
Для других гарнитур список может содержать не все перечисленные виды начертаний;
