Веб-инструмент
Веб-мастерская
Продолжим изучение обработчиков событий. Нашему вниманию будут предложены команды 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>
В окне веб-браузера это будет выглядеть ТАК.
Поместим курсор на ссылку. В строке состояния мы увидим: "Прошу убраться!"
Уберем курсор со ссыки. В строке состояния мы увидим: "Так-то лучше, спасибо".
Нажмем на ссылку. Появится окно предупреждение.
А теперь разберем скрипт.
Эффекты с мышью, создаются с помощью команд onMouseOver и onMouseOut. Обратите внимание, что между ними ощутимая разница. Вам не нужно, чтобы эти события происходили одновременно. Помните, несколько уроков назад мы разделяли два обработчика событий запятой, чтобы они происходили одновременно? Здесь не тот случай. Следовательно, нужно писать их как две абсолютно разные команды, каждая из которых содержит свою команду return true.
Чтобы получить такой эффект при уходе со страницы, добавляем команду onUnload="alert('Уже уходите?')" в строку BODY. Обратите внимание на двойные и одинарные кавычки. Внутри двойных — одинарные. Вторая пара двойных кавычек означает для браузера конец команды.
А теперь давайте:
Пишем скрипт.
<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-коде допущена ошибка.
Наведите указатель мыши на значек указанный на рисунке и щелкните по нему. Появится диалоговое окно.
Ошибка находится на 18 строке вашего HTML-кода. Исправим ее. Сохраним страницу и снова загрузим ее в веб-браузере.
Обсудить на форуме