Перестановка изображений с помощью сценария
Лабораторная работа 7
Дополнительные возможности JavaScript
Цель: Изучить дополнительные возможности JavaScript
Изменение изображений в связи с событиями, инициируемыми самим пользователем
Вы можете создать красивые эффекты, используя смену изображений в качестве реакции на определенные события. Например, вы можете изменять изображения в тот момент, когда курсор мыши попадает на определенную часть страницы. Проверьте, как работает следующий пример, просто поместив курсор мыши на картинку.
Исходный код этого примера выглядит следующим образом:
При перемещении курсора над картинкой меню возникает событие onMouseOver. В этом случае при решении задачи требуется изменить графическое изображение, что осуществляется в результате выполнения конструкции
где myImage — это значение атрибута name= из тега img.
Если курсор мыши выходит за пределы картинки, то возникает событие onMouseOut, в результате обработки которого подставляется первоначальная картинка. Это достигается оператором присваивания
onMouseOut="document.myImage.src='img1.gif'"
Помимо изменения картинок, в событиях onMouseOver и onMouseOut можно также задать текст, который будет отображаться в статусной строке браузера (в левом нижнем углу окна браузера). Для этого применяется свойство window.status (или self.status):
Обратите внимание на вложенные кавычки и обязательное возвращаемое значение return true.
Перестановка изображений
Напишем сценарий, который реализует обмен рисунков в документе. Пусть в документе расположено четыре изображения, пронумерованных от 1 до 4. В текстовых полях указываются номера рисунков, которые необходимо поменять местами. Требуется, чтобы после нажатия кнопки Поменять местамиизображения переместились на нужные места.
Сначала проверим, правильно ли заданы номера изображений, если это не так, то выдадим сообщение. Переменная 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
Приведем полностью документ со сценарием (листинг 5).
Перестановка изображений с помощью сценария
<HTML>
<HEAD>
</HEAD>
</HTML>