Отправляет email-рассылки с помощью сервиса Sendsay

Введение в Behaviors

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 618 RSS
←   Декабрь 2002   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


За последние 60 дней ни разу не выходила


Сайт рассылки: http://www.webber.ru
Открыта: 11-11-2002

Автор
Олег Тарабрин

Статистика

618 подписчиков
0 за неделю
←   Все выпуски   →

Введение в Behaviors


Информационный Канал Subscribe.Ru

Выпуск 4

Сегодня мы создадим нормальный rollover. Во-первых, он, как и всякий нормальный rollover, будет поддерживать две картинки: для состояния, когда мышка находится над rollover'ом и для состояния, когда мышка находится где-то еще. А во вторых, этот rollover (в отличие от rollover'а, описанного в выпуске 2) позволяет настроить картинку, которая будет отображаться при наведении мышки на rollover.

Rollover, который мы сегодня начнем создавать, использует одну особенность Internet Explorer'а. Дело в том, что атрибуты тегов, не распознанные браузером, не влияют на отображение документа, но анализируются и добавляются в дерево документа. Для нужд нашего rollover'а мы введем в тег img атрибут active. После этого листинг html-станицы (samp-001.html) будет выглядеть следующим образом:

<html>
 <head>
  <link rel="stylesheet" href="samp-001.css" type="text/css">
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
  <title>Пример Rollover&acute;а</title>
 </head>
 <body>
  <img src="samp-001.gif" active="samp-000.gif" class="my-rollover">
 </body>
</html>

листинг samp-001.html

Во время анализа документа, Internet Explorer не распознает этот атрибут, но добавит его в дерево документов, а мы сможем воспользоваться этим атрибутом, что и сделаем в файле html-компонента (roll-001.htc). Так же в файл html-компонента добавиться новый элемент public:attach, так как нам надо отслеживать сход мышки с нашего rollover'а (событие onmouseout). После изменений листинг html-компонента выглядит следующим образом:

<public:component>
  <public:attach event="onmouseout" onevent="event_onmouseout()" />
  <public:attach event="onmouseover" onevent="event_onmouseover()" />
  <script language="jscript">
   var passive;
   function event_onmouseout()
   {
    element.src = passive;
   }
   function event_onmouseover()
   {
    passive     = element.src;
    element.src = element.active;
   }
 </script>
</public:component>

листинг roll-001.htc

Как видите в скрипт-блок добавилась переменная passive. В ней хранится имя изображения, используемого для неактивного состояния rollover'а.

В тот момент, когда мышка заходит на rollover, происходит событие onmouseover. Это событие связано посредством элемента public:attach с функцией event_onmouseover. Эта функция состоит всего из двух строк (не учитывая заголовка и скобок). Первой строкой сохраняется имя текущего изображения, а второй строкой значение из атрибута active перекладывается в атрибут src, что вызывает смену изображения.

После того, как мышка перемещается за пределы rollover'а, происходит событие onmouseout. Далее используется сходный сценарий. Вызывается функция event_onmouseout, связанная с этим событием посредством элемента public:attach. Функция заносит в атрибут src имя изображения, сохраненного функцией event_onmouseover, что приводит к появлению старого изображения.

И, наконец, листинг таблицы стилей (samp-001.css) претерпевает наименьшие изменения, меняется всего одна цифра в названии файла html-компонента. Теперь листинг выглядит так:

img.my-rollover {behavior: url(roll-001.htc);}

листинг samp-001.css

Тексты этих листингов необходимо скопировать в соответствующие файлы (смотри подписи) и поместить в одну директорию. Так же в директорию необходимо поместить (если их там еще нет) два графических файла: samp-000.gif и samp-001.gif. Их можно скачать, используя ссылки. В качестве альтернативы можно использовать архив lesson-01.zip, содержащий все файлы, рассмотренные выпуском.

В следующем выпуске мы улучшим rollover, а заодно обсудим одно интересное событие, которое случается только в html-компонентах.

Архив рассылки

Автор рассылки

P.S. Рассылка создана в первую очередь для читателя, а уже во вторую - что бы потешить самолюбие автора (меня). Так что, если Вам что-то непонятно, или Вы имеете какие-то пожелания, пишите мне.

http://subscribe.ru/
E-mail: ask@subscribe.ru 		Отписаться
Убрать рекламу
В избранное