ВЕБ-ШКОЛА: Мультимедийные эффекты для MS Internet Explorer 4.0+ (часть 6)

РЕКЛАМА

Разное

Мультимедийные эффекты
для MS Internet Explorer 4.0+
(часть 6)

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

Интерактивные визуальные эффекты (т.е. эффекты связанные с взаимодействием пользователя с браузером) придают большую наглядность к Web документам. Эти эффекты требуют некоторого события для изменения вида документа или его элементов (им может быть перемещение или щелчок мышкой, событие от таймера, или последовательность вызовов функций сценария, вызываемая сменой состояния документа, например, в процессе загрузки).

Пример сценария, основанного на событии

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


<html>
<head><title></title></head>
<style type="text/css">
  span {font-size:18pt; font-weight:bold; width:15ex; cursor:hand}
  span.active {filter:glow(color=red; strength=3);}
  div.tip {position:absolute; visibility:hidden;
           width:30ex;height:70; text-align:center;
           padding:10; color:white; background-color:gray;
           filter:alpha(opacity=85);}
</style>
<script for=menu event=onmouseover
language="JavaScript">SetStyle("active")</script>
<script for=menu event=onmouseout
language="JavaScript">SetStyle("")</script>
<script for=menu event=onclick language="JavaScript">Select()</script>
<script language="JavaScript">
function SetStyle(stl){
   var e = window.event;
   if (e.srcElement.tagName=="SPAN")
   {
      e.srcElement.className=stl;
      var divs = document.all.tags("DIV").item("d"+e.srcElement.id);
      divs.style.visibility=(stl=="")?"hidden":"visible";
   }
}
function Select(){
   var e = window.event;
   if (e.srcElement.tagName=="SPAN")
      alert("Выбран пункт: "+e.srcElement.innerText);
}
</script>

ВАКАНСИИ (Компьютеры, Интернет). Подробнее >>


<body bgcolor=#FFFFdd>
<h2 align=center>Пример меню с подсказками</h2>
<p>
<div id=menu style="width:16ex;float:left">
 <span id=home> Home page</span>
    <div id=dhome class=tip>
        Это домашняя страница г.Иванова И.И.
    </div><br>
 <span id=prod> Products</span>
    <div id=dprod class=tip>
    Это страница программного обеспечения,
    написанного г.Ивановым И.И.
    </div><br>
 <span id=supp> Support</span>
    <div id=dsupp class=tip>
    Это страница поддержки программного обеспечения,
    написанного г.Ивановым И.И.
    </div><br>
 <span id=doc> Documentation</span>
    <div id=ddoc class=tip>
    Это страница документации на программное обеспечение,
    написанное г.Ивановым И.И.
    </div><br>
 <span id=link> Links</span>
    <div id=dlink class=tip>
    Это страница ссылок на программное обеспечение,
    написанное не г.Ивановым И.И.,
    но которое ему очень нравится
    </div><br>
</div>
<h2 style="color:blue">Это текст тела страницы<br>
Это текст тела страницы<br>
Это текст тела страницы<br>
Это текст тела страницы<br>
Это текст тела страницы<br>
Это текст тела страницы</h2>
</p>
</body>
</html>

(см. результат). [> далее >]

Каждому сайту - механизм организации собственной ленты новостей бесплатно! Подробнее >>

ПОИСК по сайту: