Перестановка рисунков с заданными номерами
В документе расположено четыре изображения. Два текстовых поля дают возможность пользователю ввести номера изображений, которые требуется поменять местами. Требуется написать сценарий, осуществляющий такой обмен. Считаем, что изображения перенумерованы слева направо, начиная с единицы. Если значения номеров рисунков введены неправильно, то выдается сообщение об ошибке. Документ приведен на рис. 4.2.
Рис. 4.2. Перестановка рисунков с заданными номерами
Свойство объекта document определяется содержимым самого документа. Если в документе содержится изображение, то доступ к объекту image можно получить с помощью значения Name тега IMG, мы воспользовались такой возможностью при написании предыдущего сценария.
Объект document имеет свойство images, которое содержит ссылки на все изображения, расположенные в документе. Ссылки перенумерованы, начиная с нуля.
Доступ к первому изображению на странице можно получить с помощью конструкции document.images[0], ко второму- document.images[1] и т.д.
В сценарии доступ к каждому из изображений происходит с помощью ссылок, которые соответствуют введенным пользователем значениям. HTML- код документа с требуемым сценарием расположен в листинге 4.2.
| Листинг 4.2. Перестановка рисунков с заданными номерами |
<html>
<head>
<title>Смена изображений</title>
<script>
function chan(obj)
{ var r1=Number(obj.a1.value)
var r2=Number(obj.a2.value)
if ((r1<1)||(r1>4)||(r2<1)||(r2>4))
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">
<img src="p4.gif" width="90" name="pic4"><br><br>
<form name=form1>
Рисунки с номерами<br>
<input type="text" name="a1" size=1> и
<input type="text" name="a2" size=1><br><br>
<input type="button" value="Поменять местами" onClick="chan(form1)">
</form></center></body></html>