Листинг 1.12. Обмен двух изображений

<HTML>

<HEAD>

<title>Обмен двух изображений</title>

<!-— //

function chpict ()

{ var d=document

var l=d.pm1.src

d.pm1.src=d.pm2.src

d.pm2.src=1

}

//-—>

</script>

</HEAD>

<h3>Обмен двух изображений</h3>

</FORM>

</BODY>

</HTML>

Итак, для любого события важно знать, когда оно наступает, и к каким объектам применяется. В предыдущих примерах мы привели варианты обработки событий, применяемых к текстовому полю (text).

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

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

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

Лекция 5. Окно. Документ. Свойства и методы