ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Команды onMouseOut и onUnload

Команды onMouseOut и onUnload

Продолжим изучение обработчиков событий. Нашему вниманию будут предложены команды onMouseOut и onUnload. Обе они начинают действовать после того, как вы что-то сделали. Команда onMouseOver вызывает некое событие, если навести мышь, к примеру, на ссылку. В противоположность ей команда onMouseOutначинает действовать, если курсор увести со ссылки. Мы также знаем, что команда onLoad запускает скрипт, когда страница загружается. Команда onUnloadдействует, когда пользователь уходит со страницы.

Пишем HTML-код.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Обработчики событий</title>
</head>

<body onUnload="alert("Уже уходите?")">

<a href="strou10.html" onMouseOver="window.status="Прошу убраться!";
return true"
onMouseOut="window.status="Так-то лучше, спасибо"; return true">Наведите курсор на эту ссылку и уведите обратно</a>

</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Поместим курсор на ссылку. В строке состояния мы увидим: "Прошу убраться!"

Команды onMouseOut и onUnload

Уберем курсор со ссыки. В строке состояния мы увидим: "Так-то лучше, спасибо".

Команды onMouseOut и onUnload

Нажмем на ссылку. Появится окно предупреждение.

Команды onMouseOut и onUnload

А теперь разберем скрипт.

Эффекты с мышью, создаются с помощью команд onMouseOver и onMouseOut. Обратите внимание, что между ними ощутимая разница. Вам не нужно, чтобы эти события происходили одновременно. Помните, несколько уроков назад мы разделяли два обработчика событий запятой, чтобы они происходили одновременно? Здесь не тот случай. Следовательно, нужно писать их как две абсолютно разные команды, каждая из которых содержит свою команду return true.

Чтобы получить такой эффект при уходе со страницы, добавляем команду onUnload="alert('Уже уходите?')" в строку BODY. Обратите внимание на двойные и одинарные кавычки. Внутри двойных — одинарные. Вторая пара двойных кавычек означает для браузера конец команды.

А теперь давайте:

  • Создадим страницу с гипертекстовой ссылкой.
  • Когда курсор наводится на ссылку, в строке состояния должны появляться слова: «Привет, пользователь название браузера!».
  • Когда курсор уходит со ссылки, в строке состояния должен появляться текст: «Не скучаете у нас на URL страницы?»
  • Если щелкнуть по ссылке, должно всплыть окно со словами: «Уже уходите? Сейчас всего только текущее время»;
  • Время должно определяться через функцию.
  • Чтобы вызвать окно предупреждения, воспользуемся командой onUnload.

Пишем скрипт.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Обработчики событий</title>
<script language="JavaScript">
function datebara(){
var d=new Date();
var h=d.getHours();
var m=d.getMinutes();
var s=d.getSeconds();
alert("Уже уходите? Сейчас всего только "+h +" час"+m +" мин"+s+" сек");
}
</script>
</head>
<body onUnload="datebara()">

<a href="strou10.html" onMouseOver="window.status="Привет пользователь Internet Explorer!";return true" onMouseOut="window.status="Не скучайте у нас на strou10.html";return true">Изучаем JavaScript</a>

</body>
</html>

В окне браузера это будет выглядеть ТАК.

Внимание! Если вдруг, страница в окне вашего веб-браузера отличается от моей тестовой веб-страницы и в строке состояния вашего веб-браузера появится значек предупреждения, то это говорит о том, что HTML-коде допущена ошибка.

s

Наведите указатель мыши на значек указанный на рисунке и щелкните по нему. Появится диалоговое окно.

s

Ошибка находится на 18 строке вашего HTML-кода. Исправим ее. Сохраним страницу и снова загрузим ее в веб-браузере.