Статические визуальные эффекты – наиболее частое применение стилевых фильтров. Часто они просто включают применение фильтра к DIV или другому объекту для создания неизменяющихся эффектов, типа падающей тени для текста. Статические эффекты – простой способ расширить дизайн Web страниц с минимальным усилиями.
Следующий пример показывается, как могут быть созданы эффекты, типа "телевидение", используя позиционирование Dynamic HTML и визуальный фильтр Alpha.
Статические визуальные эффекты могут "оживляться", используя сценарии, основанные на событиях таймера. Следующий пример показывает применение фильтра Light, параметры которого меняются через 0.1 секунды. В ходе выполнения сценария создается впечатление освещения рисунка прожектором. Применение второго фильтра Alpha (полупрозрачности) придает странице еще более интересное содержание.
<html>
<head><title>Timer Demo</title></head>
<body bgcolor=#ffffde onload="Init()">
<SCRIPT language="JavaScript">
var angle=0;
var dec=2;
var dir=dec;
//параметры фильтра light
var x;
var y;
var x0=-20;
var y0=-20;
var z0=0;
var r = 255;
var g = 255;
var b = 255;
function GetXY()
{
var rad = Math.PI*angle/180.0;
x = oDiv.offsetWidth;
y = Math.tan(rad)*x;
if (y>oDiv.offsetHeight){
y = oDiv.offsetHeight;
x = y/Math.tan(rad);
}
}
function Next()
{
if ((angle+=dir)>=90){
angle=90;
dir=-dec;
}
if (angle<=0){
angle=0;
dir=dec;
}
GetXY();
oDiv.filters.light.clear();
oDiv.filters.light.addCone(x0,y0,z0,x,y,r,g,b,50,80);
}
function Init(){
GetXY();
oDiv.filters[0].addCone(x0,y0,z0,x,y,r,g,b,50,80);
setInterval("Next()",100);
}
</SCRIPT>
<DIV ID="oDiv" style="position:absolute; background-color:white;
filter: light() alpha(opacity=40);
width: 370; height:120;">
<img src=sample.gif >
</DIV>
<br>
<DIV style="width:370; height:120; text-align:center">
<p><font size=+1>
Такую возможность предоставляет<br>
на сегодняшний день пожалуй<br>
лишь один браузер<br>
</font></p>
</DIV>
</body>
</html>
Интерактивные визуальные эффекты (т.е. эффекты связанные с взаимодействием пользователя с браузером) придают большую наглядность к Web документам. Эти эффекты требуют некоторого события для изменения вида документа или его элементов (им может быть перемещение или щелчок мышкой, событие от таймера, или последовательность вызовов функций сценария, вызываемая сменой состояния документа, например, в процессе загрузки).
Пример сценария, основанного на событии
В этом примере, приводится пример меню, которое можно использовать на страницах Вашего сайта. При перемещении мышки на элемент меню справа от выбранного пункта появляется полупрозрачное (фильтр Alpha) окно подсказки.
Определим стили для наших элементов меню и подсказок
<script language="javascript">
function SetStyle(e, o){
// фунцкия отображения скрытия подсказок
var myObj = o.parentNode;
while(true){
if(!myObj.nextSibling);
myObj = myObj.nextSibling;
if(!myObj) return;
if(myObj.tagName=='DD'){
var fHid = !myObj.style.display || myObj.style.display=='none';
myObj.style.display = fHid?'block':'none';
return;
}
if(myObj.tagName=='DT') return;
}
}
function Select(o){
//функция обработки клика мышкой по пункту меню
//в реальной ситуации может не потребоваться
alert("Выбран пункт: "+o.innerHTML);
}
</script>
HTML код основного содержания веб-страницы
<h1 align="center">Пример меню с подсказками</h1>
<dl id="LeftMenu">
<dt><a href="javascript:;" onmouseover="SetStyle(event, this);"
onmouseout="SetStyle(event, this);" onclick="Select(this);">HTML</a></dt>
<dd>HTML – это стандартный язык разметки документов во Всемирной паутине.</dd>
<dt><a href="javascript:;" onmouseover="SetStyle(event, this);"
onmouseout="SetStyle(event, this);" onclick="Select(this);">PHP</a></dt>
<dd>PHP – скриптовый язык программирования, созданный для генерации HTML-страниц.</dd>
<dt><a href="javascript:;" onmouseover="SetStyle(event, this);"
onmouseout="SetStyle(event, this);" onclick="Select(this);">Apache</a></dt>
<dd>Apache HTTP-сервер (сокращение от англ. a patchy server) – свободный веб-сервер.</dd>
<dt><a href="javascript:;" onmouseover="SetStyle(event, this);"
onmouseout="SetStyle(event, this);" onclick="Select(this);">MySQL</a></dt>
<dd>MySQL – свободная система управления базами данных (СУБД).</dd>
<dt><a href="javascript:;" onmouseover="SetStyle(event, this);"
onmouseout="SetStyle(event, this);" onclick="Select(this);">Оптимизация</a></dt>
<dd>Поисковая оптимизация – оптимизация HTML-кода, текста и структуры сайта
с целью поднятия его в выдаче поисковой системы.</dd>
</dl>
<div id="content">
<p>Этот пример показывает применимость стилевого фильтра Alpha в браузере MS Internet Explorer
для отображения всплывающих подсказок на полупрозрачном фоне.</p>
</div>
Полезное » Статьи для веб-мастера » Мультимедийные эффекты для MS Internet Explorer » Примеры программирования визуальных фильтров
