Пример 1. Перестановка изображений

Напишем сценарий, который реализует обмен рисунков в документе. Пусть в документе расположено три изображения, пронумерованных от 1 до 3. В текстовых полях указываются номера рисунков, которые необходимо поменять местами. Требуется, чтобы после нажатия кнопки Обменять изображения переместились на нужные места. Сначала проверим, правильно ли заданы номера изображений, если это не так, то выдадим сообщение. Переменная z служит для запоминания адреса первого графического изображения. Доступ к изображению с номером r1 производится с помощью конструкции document.images[r1-1]. Для того чтобы на место изображения с номером r1 поместить изображение с номером r2, требуется выполнить оператор присваивания:

document.images[r1-1].src=document.images[r2-1].src

И, наконец, на место изображения с номером r2 помещается изображение, которое ранее было на месте с номером r1, и адрес которого запомнили в переменной z:

document.images[r2-1].src=z

Приведем полностью документ со сценарием (листинг 1).

<HTML>

<HEAD>

<TITLE>Перестановка изображений</TITLE>

<script>

function chan(obj)

{ var r1=Number(obj.a1.value)

var r2=Number(obj.a2.value)

if ((r1<1)||(r1>3)||(r2<1)||(r2>3))

alert ("Неверно заданы номера рисунков!")

else

{ var z=document.images[r1-1].src

document.images[r1-1].src=document.images[r2-1].src;

document.images[r2-1].src=z

} }

</script>

</HEAD>

<BODY>

<CENTER>

<H4>Галерея рисунков</H4><br>

<IMG src="p1.gif" width="90" name="pic1">

<IMG src="p2.gif" width="90" name="pic2">

<IMG src="p3.gif" width="90" name="pic3"> <br>

<FORM name=form1>

Рисунки с номерами<br>

<input type="text" name="a1" size=1> и

<input type="text" name="a2" size=1><P>

<input type="button" value="Поменять местами" onClick="chan(form1)">

</FORM>

</CENTER>

</BODY>

</HTML>

Пример 2. Простое вертикальное меню

Напишем сценарий, реализующий вертикальное графическое меню. При наведении курсора мыши на пункт меню меняется цветовая палитра, соответствующая выделенному пункту меню. Каждому пункту меню соответствует два изображения: первое изображение, когда пункт меню не выбран, второе - при выбранном пункте меню, цветовая палитра рисунка изменена. Графические изображения, соответствующие ситуации, когда пункты меню не выбраны, хранятся в файлах с именами pch1.gif, pch2.gif. Соответствующие им графические изображения с измененной палитрой хранятся в файлах с именами wpch1.gif, wpch2.gif. Функция img имеет два параметра. Первый параметр задает выбор пункта меню, второй параметр - n - определяет номер пункта меню. От этого параметра зависит, какое изображение в документе требуется изменить document.images[n-1].src (вставить на этом месте рисунок "wpch"+n+".gif" или pch"+n+".gif). Имя файла формируется динамически и представляет собой конкатенацию (слияние) строк, одна из составляющих которой - значение второго параметра. Если имена файлов не подчинены общему правилу, то в функции потребуется дополнительный анализ, какой файл подгрузить. Это сделать нетрудно, зная место в документе, из которого произошел вызов функции. Документ со сценарием, реализующий вертикальное графическое меню, представлен в листинге 2.

Листинг 2. Простое вертикальное меню

<HTML>

<HEAD>

<TITLE>Простое вертикальное меню</TITLE>

<script language="JavaScript">

function img(n, action)

{if (action)

{document.images[n-1].src="wpch"+n+".gif"}

else

{document.images[n-1].src="pch"+n+".gif"}

}

</script>

</HEAD>

<BODY background="fon1.jpg">

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

<A href="tch1.htm" onmouseover="img(1,1)" onmouseout="img(1,0)">

<IMG src="pch1.gif" аlt="форматирование текста" border="0" width="103" height="35"></A><br>

<A href="tch2.htm" onmouseover="img(2,1)" onmouseout="img(2,0)">

<IMG src="pch2.gif" аlt="форматирование текста" border="0" width="103" height="35"></A><br>

<A href="tch3.htm" onmouseover="img(3,1)" onmouseout="img(3,0)">

<IMG src="pch3.gif" аlt="форматирование текста" border="0" width="103" height="35"></A><br>

</BODY>

</HTML>

При попадании курсора мыши в область изображения возникает событие Mouseover, параметр обработки события onMouseOver получает значение img(p1,true).