- имеем ту же картинку, но полупрозрачную.
Фильтры поддерживаются языками сценариев. Доступ к фильтрам организуется через объектное свойство filters и атрибут ID графического элемента.
JavaScript:
<SCRIPT language="JavaScript">function Blur(inc){Pic.filters.blur.strength+=inc;}</script>...<IMG ID=Pic SRC=img.gifSTYLE="filter:blur(strength=10)"OnMouseOver="javascript:Blur(20)"OnMouseOut="javascript:Blur(-20)">
Здесь функция Blur() обращается к фильтру blur объекта Pic и изменяет его параметр strength при наведении курсора мышки.
VBScript:
<SCRIPT language="VBScript"> Pic.style.filter = "flipv" </script> ... <IMG ID=Pic SRC=img.gif>
Здесь используется фильтр flip, который переворачивает изображение вокруг вертикальной оси.
Статические фильтры
Alpha
Задает уровень прозрачности элемента страницы.
При настройке этого фильтра можно использовать следующие параметры:
AlphaImageLoaded
Отображает графическое изображение внутри элемента страницы между его фоном и содержимым.
При настройке этого фильтра можно использовать следующие параметры:
BasicImage
Делает элемент страницы черно-белым, как бы просвеченным рентгеновскими лучами, вращает его.
Отдельно можно задавать угол поворота, стерень "просвеченности".
При настройке этого фильтра можно использовать следующие параметры:
Blur
Делает элемент страницы размытым.
При настройке этого фильтра можно использовать следующие параметры:
Chroma
Делает прозрачным отдельный цвет элемента.
При настройке этого фильтра можно использовать следующие параметры:
Compositor
Объеденяет два цвета элемента страницы и выводит что получилось.
При настройке этого фильтра можно использовать следующие параметры:
DropShadow
Отбрасывает тень у элемента страницы, которая отображается отдельно от самого элемента.
При настройке этого фильтра можно использовать следующие параметры:
Emboss
Делает элемент страницы выпуклым.
При настройке этого фильтра можно использовать следующие параметры:
Engrave
Делает элемент страницы вдавленным.
При настройке этого фильтра можно использовать следующие параметры:
Glow
Создает эффект "тления" элемента страницы.
При настройке этого фильтра можно использовать следующие параметры:
Gradient
Эффект градиентной закраски элемента страницы.
При настройке этого фильтра можно использовать следующие параметры:
Light
Создет эффект освещенности элемента страницы.
Методы, применяемые к этому фильтру:
MaskFilter
Отображает прозрачный цвет элемента страницы заданным цветом.
При настройке этого фильтра можно использовать следующие параметры:
Matrix
Изменяет элемент страницы путем изменения размеров, поворотов или инвертируя его при помощи матричных преобразований.
При настройке этого фильтра можно использовать следующие параметры:
"bilinear" (по умолчанию)
MotiobBlur
Создает эффект быстрого движения (размытости).
При настройке этого фильтра можно использовать следующие параметры:
Pixelate
Отображает элемент страницы отдельными пикселами.
При настройке этого фильтра можно использовать следующие параметры:
Shadow
Создает эффект отбрасывания тени у элемента страницы.
При настройке этого фильтра можно использовать следующие параметры:
Wave
Создает волнистое искажение элемента страницы.
При настройке этого фильтра можно использовать следующие параметры:
Динамические фильтры
Barn()
Создает эффект "открывающейся и закрывающейся двери".
Здесь sProperties - строка, содержащая один или несколько свойств, задающих поведение фильтра.
Атрибуты
Свойства
Задает или возвращает признак разрешения применения фильтра.
Задает или возвращает направление движения: от центра к границам или наоборот.
Задает или возвращает направление преобразования: по вертикали или по горизонтали.
Задает процент выполнения преобразования.
Возвращает состояние выполнения преобразования.
Замораживает элемент страниы, после чего вы можете делать с ним все, что хотите.
Пример 1:
<SCRIPT>var bToggle = 0;function fnToggle() { oDiv.filters[0].Apply(); // После того, как применяется метод Apply к выбранному объекту// фильтр не запустится пока не будет вызван метод Play if (bToggle) { bToggle = 0; oDiv.style.backgroundColor="gold"; } else { bToggle = 1; oDiv.style.backgroundColor="blue";} oDiv.filters[0].Play();}</SCRIPT>
<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>
<BR>
<BR>
<DIV ID="oDiv" STYLE="height:250px; width:250px; background-color: gold; filter:progid:DXImageTransform.Microsoft.Barn( duration=2, motion=out, orientation=vertical);"></DIV>
Пример 2:
<!-- К этому элементу применяется фильтр. -->
<DIV ID="oTransContainer" STYLE="position:absolute; top: 0px; left: 0px; width: 300px; height:300px; filter:progid:DXImageTransform.Microsoft.Barn(orientation=horizontal, motion=out) ">
<!-- Это первое содержимое, которое будет показано. -->
<DIV ID="oDIV1" STYLE="position:absolute; top:50px; left:10px; width:240px; height:160px; background:gold"> This is DIV #1 </DIV>
<!-- Это содержимое, которое будет показано после применения фильтра. -->
<DIV ID="oDIV2" STYLE="visibility:hidden; position:absolute; top:50px; left:10px; width:240px; height:160px; background: yellowgreen; ">
<BR> This is DIV #2 </DIV> </DIV>
<BUTTON onclick="fnToggle()">Toggle Transition</BUTTON>
<SCRIPT>var bTranState = 0;function fnToggle() { oTransContainer.filters[0].Apply(); if (bTranState=="0") { bTranState = 1; oDIV2.style.visibility="visible"; oDIV1.style.visibility="hidden"; } else { bTranState = 0; oDIV2.style.visibility="hidden"; oDIV1.style.visibility="visible";} oTransContainer.filters[0].Play();}</SCRIPT>
Barn
Barn()
Создает эффект "открывающейся и закрывающейся двери".