Листинг 1.10. Обработка события: — потеря объектом фокуса
<HTML>
<HEAD>
<title>Обработка события Blur - потеря объектом фокуса</title>
<script>
function srec()
{forml.res.value=forml.numl.value* form1.numl.value}
</script>
</HEAD>
<BODY>
<Р>Вычисление площади квадрата</Р>
<FORM name="form1">
Сторона: <input type="text" size=7 name="num1" value=8
onBlur="srec()"><hr>
Площадь: <input type="text" size=7 name="res"><hr>
<input type="reset" value = Обновить>
</FORM>
</BODY>
</HTML>
В результате потери фокуса полем numl происходит вычисление значения площади и помещение вычисленного значения в поле res. Первоначально будет вычислен результат, равный 64. Можно ввести нужное значение и при переходе к любому другому элементу, в поле res отобразится вычисленное значение.
Обработка события Select
Событие select вызывается выбором части или всего текста в текстовом поле. Например, щелкнув дважды мышью по полю numl, мы выделим поле, наступит событие select, обработка которого приведет к вычислению требуемого значения.
Напишем сценарий, определяющий площадь квадрата по заданной стороне. Площадь должна вычисляться в тот момент, когда выбирается часть или весь текст в текстовом поле. HTML-код представлен в листинге 1.11.
Листинг 1.10 Обработка события Select — выбор поля ввода элемента формы
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
<title>Обработка события Select.- выбор поля ввода элемента формы</title>
<script>
function srec ()
{forml.res.value=forml.numl.value* forml.numl.value}
</script>
</HEAD>
<BODY>
<Р>Вычисление площади квадрата</Р>
<FORM name="forml">
Сторона: <input type="text" size=7 name="numl" value=9
onSelect="srec()"><hr>
Площадь: <input type="text" size=7 name="res"><hr>
<input type="reset" value=Oбновить>
</FORM>
</BODY>
</HTML></BODY>
</HTML>
Перестановка двух изображений
В документе заданы два изображения. Требуется написать сценарий, который осуществляет перестановку заданных изображений. Вид документа приведен на рис. 1.6. При нажатии на кнопку Обменять изображения меняются местами. Функция chpict вызывается как реакция на событие "щелчок по кнопке" Обменять. Изображения задаются в документе с помощью тегов. Значение параметра src определяет имя файла, в котором хранится изображение. Переменная 1 служит для того, чтобы запомнить имя файла, который связан с первым изображением. Оператор присваивания d.pmi.src=d.pm2.src обеспечит загрузку второго изображения вместо первого. И, наконец, со вторым тегом изображения будет связан тот файл, который первоначально относился к первому изображению. В результате описанных действий изображения в документе будут переставлены. HTML-код документа, осуществляющего обмен изображений, имеет вид, приведенный в листинге 1.12.
|
Рис 1.6. Обмен двух изображений |
Листинг 1.12. Обмен двух изображений
<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html;charset=windows-1251">
<title>Обмен двух изображений</title>
<script language="JavaScript">
<!-- //
function chpict ()
{ var d=document
var l=d.pm1.src
d.pm1.src=d.pm2.src
d.pm2.src=l}
//-->
</script>
</HEAD>
<BODY bgcolor=F8F8FF>
<h3>Обмен двух изображений</h3>
<IMG src="m1.jpg" name=pm1 width=200>
<IMG src="m2.jpg" name=pm2 width=200>
<FORM name="form1">
<input type="button" value="Обменять" onClick="chpict()">
</FORM>
</BODY>
</HTML>
Итак, для любого события важно знать, когда оно наступает, и к каким объектам применяется. В предыдущих примерах мы привели варианты обработки событий, применяемых к текстовому полю (text).
Вертикальное графическое меню
Создадим документ, реализующий вертикальное графическое меню. При наведении курсора мыши над пунктом меню должна меняться цветовая палитра, соответствующая выделенному пункту меню (рис. 1.7).
|
Рис 1.7. Вертикальное графическое меню |
Каждому пункту меню соответствует два изображения:
первое изображение, когда пункт меню не выбран;
второе — при выбранном пункте меню, цветовая палитра рисунка изменена.
Графические.изображения, соответствующие ситуации, когда пункты меню не выбраны, хранятся в файлах с именами pchl.gif, pch2.gif, pch3.gif, pch4.gif, pch5.gif. Соответствующие им графические изображения с измененной палитрой хранятся в файлах с именами wpchl.gif, wpch2.gif, wpch3.gif, wpch4.gif, wpch5.
При перемещении курсора над пунктом меню возникает событие onmouseover. В этом случае при решении задачи требуется изменить графическое изображение, соответствующее выбранному пункту меню, что осуществляется в результате выполнения конструкции
onmouseover="document.pml.src='wpchl.gif'"
Если курсор мыши выходит за пределы области связи, то возникает событие onmouseout, в результате обработки которого пункт меню должен принять первоначальный вид. Это достигается оператором присваивания
onmouseout="document .pml. src=.'pchl.gif "
HTML-код документа, реализующего графическое вертикальное меню, может иметь следующий вид, представленный в листинге 1.13, а.