Отправляет 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

Выпуск 5

Вначале я хочу поблагодарить всех, кто указал на неверную ссылку на архив рассылки. Ссылка на архив рассылки исправлена.

Сегодня мы внесем несколько изменений в код rollover, созданного в предыдущем выпуске. Для того, что бы понять, зачем вообще нужны какие-либо изменения, сформулируем два вопроса:

  • Что произойдет, если пользователь наведет курсор мыши до того момента, когда элемент (в нашем случае тег img) полностью будет загружен и проанализирован?
  • Что произойдет, если автор html-документа использует наш rollover, но забудет прописать предусмотренный нами атрибут?

В нашем случае ничего страшного не произойдет. Если Вы не собираетесь использовать огромные изображения для rollover'а, то интервал времени, от связывания поведения элементом img, до загрузки изображения так мал, что пользователь, скорее всего, просто не успеет переместить курсор.

Если автор html-документа не укажет предусмотренный нами атрибут, то при наведении курсора на rollover будет отображено так называемое пустое изображение. Вы его наверняка видели, когда браузер, по тем или иным причинам, не мог загрузить изображение.

Однако любых, даже потенциальных, ошибок лучше избегать. Так что изменения, которые мы внесем сегодня в код rollover'а, как раз и будут предотвращать перечисленные проблемы. В следующем листинге приведен код измененного rollover'а (roll-002.htc):

<public:component>
 <public:attach event="oncontentready" onevent="event_oncontentready()"  />
 <script language="jscript">
  var passive;
  var active;
  function event_onmouseout()
  {
   element.src = passive;
  }
  function event_onmouseover()
  {
   element.src = active;
  }
  function event_oncontentready()
  {
   if (element.getAttribute("src") != null)
    passive = element.getAttribute("src");
   else
    passive = "";

   if (element.getAttribute("active") != null)
    active = element.getAttribute("active");
   else
    active = passive;
   element.attachEvent("onmouseout",event_onmouseout);
   element.attachEvent("onmouseover",event_onmouseover);
  }
 </script>
 </public:component>

roll-002.htc

Во-первых, мы заменили два элемента public:attach на один. И используем в нем событие oncontentready. Данное событие возникает, когда элемент, к которому применено поведение, полностью загружен, проанализирован и готов для взаимодействия с html-компонентом. Так как теперь наш html-компонент, по умолчанию, не связан с событиями onmouseover и onmouseout, то и не реагирует на них, пока мы это не изменим.

Для того, что бы связать событие элемента с функцией - обработчиком, мы используем метод attachEvent("event_name", function_name). Этот метод является аналогом элемента public:attach. В качестве первого параметра этот метод принимает строку с именем связываемого события, а второй параметр является ссылкой на функцию - обработчик. Обратите внимание, что имя функции - обработчика записывается без кавычек и без скобок. Таким образом, полностью решается первая из проблем.

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

На случай, если автор html-документа забыл прописать атрибуты, мы используем метод getAttribute("name"). Этот метод возвращает значение атрибута с именем name. Однако если атрибут не задан, то возвращается null, что мы и проверяем перед присвоением значения переменным active и passive. В качестве завершающего штриха осталось привести листинги файла стилей (samp-002.css) и листинг html-страницы (samp-002.html):

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

samp-002.css

<html>
 <head>
  <link rel="stylesheet" href="samp-002.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-002.html

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

Ну вот, мы и закончили разработку rollover'а. Теперь его можно применять в реальных проектах. В двух следующих выпусках мы создадим чуть более сложное поведение, который будет имитировать снегопад для выбранного объекта.

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

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

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

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