Домашние Картинки разработка веб-сайтов в Челябинске
(351) 777-94-64info@homepictures.ru
/Полезное/Статьи для веб-мастера/Мультимедийные эффекты для MS Internet Explorer/Примеры программирования визуальных фильтров

Примеры программирования

Примеры программирования визуальных фильтров

Эта статья была написана в 2000 году и актуальна только для браузеров версий IE4 – IE8.

Создание статических визуальных эффектов

Статические визуальные эффекты – наиболее частое применение стилевых фильтров. Часто они просто включают применение фильтра к DIV или другому объекту для создания неизменяющихся эффектов, типа падающей тени для текста. Статические эффекты – простой способ расширить дизайн Web страниц с минимальным усилиями.

Следующий пример показывается, как могут быть созданы эффекты, типа "телевидение", используя позиционирование Dynamic HTML и визуальный фильтр Alpha.

...
<DIV style="position:absolute; width:188px; height:50;
     background-color: black; filter: alpha(opacity=50)"></DIV>
<DIV style="color:white; position:absolute; width:188px; height:50;">
<P style="font-size:14pt;font-weight:bold; text-align:right; padding-right:3ex;color:#FFFFFF;"> Home<br>Pictures</P>
</DIV>
<IMG src="/images/hp_logo.gif" width="188" height="145">
...

Home
Pictures


Пример сценария, использующего таймер

Статические визуальные эффекты могут "оживляться", используя сценарии, основанные на событиях таймера. Следующий пример показывает применение фильтра Light, параметры которого меняются через 0.1 секунды. В ходе выполнения сценария создается впечатление освещения рисунка прожектором. Применение второго фильтра Alpha (полупрозрачности) придает странице еще более интересное содержание.

<html>
<head><title>Timer Demo</title></head>

<body bgcolor=#ffffde onload="Init()">
<script type="text/javascript">
var angle=0, dec=2, dir=dec;
//параметры фильтра light
var x, y, x0=-20, y0=-20, z0=0, r = 255, g = 255, 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) окно подсказки.

Определим стили для наших элементов меню и подсказок

<style type="text/css">
* { font-size:9pt; font-family: Arial, Helvetica, sans-serif; }
h1 { font-size:12pt; }
p { margin: 0 0 5pt 0; }
/* dl - контейнер левого меню */
dl { width:120pt; float:left; display:inline; margin:0; padding:0 0 0 3pt; 
     border:1px solid #999999; background-color:#CCCCCC;}
/* dt элементы меню */
dl dt { margin:5pt 3pt 0pt 3pt;}
dl dt a, 
dl dt a:visited {font-size:150%;  font-weight:bold; color:#000000; text-decoration:none;}
dl dt a:hover{text-decoration:underline; color:#FF0000; }
/* dd элементы подсказок */
dl dd { font-size:80%; position:absolute; display:none; background-color:#333333;
        width:150pt; padding:3pt; margin:0 0 0 70pt; color:#FFFFFF; filter:alpha(opacity=85);}
/* #content - контейнер основного текста страницы */
#content { float:left; padding: 0 0 0 15pt; width:200pt; }
</style>

Javascript секция обработчиков событий мыши

<script type="text/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 &#150; это стандартный язык разметки документов во Всемирной паутине.</dd>
<dt><a href="javascript:;" onmouseover="SetStyle(event, this);" 
onmouseout="SetStyle(event, this);" onclick="Select(this);">PHP</a></dt>
<dd>PHP &#150; скриптовый язык программирования, созданный для генерации 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) &#150; свободный веб-сервер.</dd>
<dt><a href="javascript:;" onmouseover="SetStyle(event, this);" 
onmouseout="SetStyle(event, this);" onclick="Select(this);">MySQL</a></dt>
<dd>MySQL &#150; свободная система управления базами данных (СУБД).</dd>
<dt><a href="javascript:;" onmouseover="SetStyle(event, this);" 
onmouseout="SetStyle(event, this);" onclick="Select(this);">Оптимизация</a></dt>
<dd>Поисковая оптимизация &#150; оптимизация HTML-кода, текста и структуры сайта 
с целью поднятия его в выдаче поисковой системы.</dd>
</dl>
<div id="content">
<p>Этот пример показывает применимость стилевого фильтра Alpha в браузере MS Internet Explorer
 для отображения всплывающих подсказок на полупрозрачном фоне.</p>
</div>

(см. результат)


Назад: Создание визуальных эффектов фильтрами и превращениями

Далее: Превращения