Вертикальное графическое меню

Создадим документ, реализующий вертикальное графическое меню. При наведении курсора мыши над пунктом меню должна меняться цветовая палитра, соответствующая выделенному пункту меню (рис. 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, а.

Листинг 1.13, а. Вертикальное графическое меню (вариант 1)

<HTML>

<HEAD>

<title>Вертикальное графическое меню</title>

</HEAD>

<h2><font color="#OOOOFF">Содержание</font></h2>

<A href="tchl.htm" target="Main"

onmouseover="document.pml.src='wpchl.gif'"

onmouseout="document.pml.src='pchl.gif'" >

<IMG src="pchl.gif" name="pm1" alt="форматирование текста"

border="0" width="103" height="35"></A><br>

<A href="tch2.htm" target="Main"

onmouseover="document.pm2.src='wpch2.gif'"

onmouseout="document.pm2.src='pch2.gif'" >

<IMG src="pch2.gif" name="pm2" аlt="создание списков"

order="0" width="103" height="35"></A><br>

<A href="tch3.htm" target="Main"

onmouseover="document.pm3.src='wpch3.gif'"

onmouseout="document.pm3.src='pch3.gif'" >

<IMG src="pch3.gif" name="pm3" alt="построение таблиц"

border="0" width="103" height="35"></A><br>

<A href="tch4.htm" target="Main"

onmouseover="document.pm4.src='wpch4.gif'"

onmouseout= "document.pm4.src='pch4 .gif'" >

<IMG src="pch4.gif" name="pm4" alt="использование графики"

border="0" width="103" height="35"></A><br>

<A href="tch5.htm"

onmouseover="document.pm5.src='wpch5.gif'"

onmouseout="document.pm5.src='pch5.gif'" >

<IMG src="pch5.gif" name="pm5" alt="создание фреймовой структуры"

border="0" width="103" height="35"></A>

<br>

</BODY>

</HTML>

Событие onmouseover возникает и при перемещении курсора мыши над изображением. Событие onmouseout наступает при выходе курсора за пределы области изображения. Поэтому обработку события можно помешать не в тег <А>, как было сделано в предыдущем примере, а в тег <IMG>, как это сделано в листинге 1.13, б.

Листинг 1.13, б. Вертикальное графическое меню (вариант 2)

<HTML>

<HEAD>

<TITLE>Вертикальное графическое меню</TITLE>

</HEAD>

<H2><FONT соlоr="#0000FF">Содержание</font></Н2>

<img src="pchl.gif" name="pml" аlt="форматирование текста"

border="0" width="103" height="35"

onmouseover="document.pml.src='wpchl.gif"

onmouseout="document.pml. src='pchl .gif "></A><br>

<img src="pch2.gif" name="pm2" alt-''создание списков" border="0"

width="103" height="35"

onmouseover="document.pm2.src='wpch2.gif"

onmouseout="document.pm2.src='pch2.gif'"></A><br>

<img src="pch3.gif" name="pm3" аlt="построение таблиц" border="0"

width="103" height="35"

onmouseover="document.pm3.src='wpch3.gif"

onmouseout="document.pm3.src='pch3.gif'"></A><br>

<IMG src="pch4.gif" name="pm4" alt="иcпoльзoвaниe графики"

border="0" width="103" height="35"

onmouseover="document.pm4.src='wpch4.gif"

onmouseout="document.pm4 . src='pch4 .gif "></A><br>

<img src="pch5.gif" name="pm5" alt="создание фреймовой структуры"

border="0" width="103" height="35"

onmouseover="document.pm5.src='wpch5.gif'"

onmouseout="document.pm5.src='pch5.gif"></A><br>

</BODY>

</HTML>

Вид документа в обоих случаях будет одинаков.

Расписание занятий

Напишем сценарий, в результате работы которого при попадании курсора мыши на элемент списка, в текстовом поле появляется соответствующее сообщение.

Рис 1.8. Расписание занятий

Пусть список представляет собой расписание занятий в определенный день, а текст сообщения содержит комментарий к каждому занятию. Вид документа приведен на рис. 1.8.

Расписание занятий задается списком. В теге <LI>, определяющем элемент списка, предусмотрена реакция на два события, связанных с попаданием курсора мыши на элемент списка и выход курсора за пределы элемента списка. При попадании в текстовое поле помещается значение строки. Размещаемая в текстовом поле строка определяется параметром функции. HTML-код документа имеет вид, представленный в листинге 1.14.

<HTML>

<HEAD>

<title>Расписание занятий </title>

<!--

var s1="Контрольная работа"

var s2='Изменилась аудитория 2246. 2 этаж'

var s3='Занятия в компьютерном классе'

var s4='Подготовка реферата'

var s5='Занятия переносятся на следующую неделю'

function sch(s)

{document.form1.m1.value=s}

function delet ()

{document.form1.m1.value=''}

//-->

</script>

</HEAD>

<h4>Расписание занятий</h4>

</FORM>

</TR>

<b><i>l пара </i></b> Математический анализ

<b><i>2 пара </i></b>Высшая алгебра

<b><i>3 пара </i></b> Программирование

<b><i>4 пара </i></b> История

<b><i>5 пара </i></b> Дискретный анализ

</FONT>

</UL>

</TD></TR>

</TABLE>

</BODY>

</HTML>

В табл. 1.5 представлены события и элементы документов HTML, в которых эти события могут происходить.

Таблица 1.5.События и объекты

Событие	Объекты	Когда происходит событие
Abort	image	Отказ от загрузки изображения
Blur	windows, элементы формы	Потеря объектом фокуса
Change	text, textarea, select	Изменение значения элемента
Click	button, radio, checkbox, submit, reset, link	Щелчок на элементе или связи
DragDrop	windows	Перетаскивается мышью объект в окно браузера
Error	image, windows	Ошибка при загрузке документа или изображения
Focus	windows, элементы формы	Окно или элемент формы получает фокус
KeyDown	document, image, link, textarea	Нажатие клавиши клавиатуры
KeyPress	document, image, link, textarea	Удержание нажатой клавиши клавиатуры
KeyUp	document, image, link, textarea	Отпускаются клавиши клавиатуры
Load	Тело документа	Загружается документ в браузер
MouseDown	document, button, link	Нажатие кнопки мыши
MouseOut	area, link	Перемещение курсора из области изображения или связи
MouseOver	link	Перемещение курсора над связью
MouseUp	document, button, link	Отпускается кнопка мыши
Move	windows	Пользователь или сценарий перемещает окно
Reset	form	Нажатие кнопки Reset формы
Resize	windows	Пользователь или сценарий изменяет размеры окна
Select	text, textarea	Выбирается поле ввода элемента формы
Submit	form	Нажатие кнопки Submit формы
Unload	Тело документа	Пользователь закрывает документ

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