Результат работы сценария

Пример анимации с помощью OnMouseOver и OnMouseOut.

Если быстро двигать курсором мыши на изображении, то возникает ощущение ожившего изображения — анимации.

Разбор сценария

Не забывайте про регистр символов при записи OnMouseOver и OnMouseOut.

Обратите внимание, что в сценарии созданы две функции.

<SCRIPT type="text/javascript">function up() { document.mypic.src="up.gif" }function down() { document.mypic.src="down.gif" }

Функции выполняют то же, что и команды в прошлом уроке. Помните иерархию объектов? Сначала документ, потом имя, присвоенное объекту, и наконец SRC. Функции названы up() и down().

Теперь посмотрим на вызов функции:

Формат почти такой же, как и использованный в Уроке 15, но здесь вместо включения оператора в команду HREF вызывается функция.

Этот пример по-прежнему имеет один оператор JavaScript. Вспомните, что обычно функции используются для объединения нескольких операторов. Мы хотели просто сделать пример коротким.

Если вы решите использовать многократную смену картинок с помощью JavaScript, помните, что для каждого случая нужно создавать имя новой функции и соединять определенные изображения с этими функциями, изменяя также атрибут NAME. Например: вы хотите поместить на страницу еще одну такую же меняющуюся картинку. Для этого создаем две новые функции, копируя предыдущие две функции и добавляя к именам цифру 2 (обратите на это внимание в коде ниже). Затем необходимо изменить в каждом случае атрибут NAME (снова обратите внимание на код ниже), поэтому изменяем имя на mypic2. Не забудьте изменять его везде, где оно появляется. Получаем примерно следующее в разделе заголовка HEAD:

<SCRIPT LANGUAGE="JavaScript">function up(){ document.mypic.src="up.gif"}function down() { document.mypic.src="down.gif" } function up2() { document.mypic2.src="up.gif" } function down2() { document.mypic2.src="down.gif" } </SCRIPT>

... и примерно следующее для вызова двух различных изображений:

Видите, как новые функции связаны с новыми именами? Делайте это каждый раз при добавлении новой меняющейся картинки. Если требуется три случая, то добавьте цифру 3 везде, где выше добавлена 2. Если четыре, добавьте 4, и т.д.

Задание

Переделайте последнее задание, использующее Bubble1.gif и Bubble2.gif. Создайте две функции для смены этих изображений.

Возможное решение

<html> <head> <SCRIPT type="text/javascript"> function swap1for2() { document.pic1.src="bubble2.gif" } function swap2for1() { document.pic1.src="bubble1.gif" } </SCRIPT> </head> <body bgcolor="white"> <center> <h1> Иван Иванович</h1> <a href="" onMouseOver="swap1for2() " onMouseOut="swap2for1()"> <img src="bubble1.gif" border=0 name="pic1"> </a> </center> </body> </html>

17. Урок: Вызов функции в формы

Создание функций для обработки данных пользователя в формах.

Концепция

Цель этого урока — познакомить вас с применением JavaScript в формах. Рассматриваемый сценарий использует форму для выбора цвета фона, голубого или розового. Отметим, что выбор цвета делается с помощью кнопок формы.

Формы всегда начинаются тегом <FORM> и заканчиваются тегом </FORM>. В этом ничего нового, простой HTML.

Сценарий

Пример ниже снова показывает весь документ HTML:

<html><head><SCRIPT type="text/javascript">function newcolor(color){ alert("Вы выбрали " + color) document.bgColor=color}</SCRIPT></HEAD><BODY><p>Выберите цвет фона</p><FORM> <INPUT TYPE="button" VALUE="Голубой" onClick="newcolor('lightblue')"> <INPUT TYPE="button" VALUE="Розовый" onClick="newcolor('pink')"></FORM></BODY></HTML>

Понравилась статья? Добавь ее в закладку (CTRL+D) и не забудь поделиться с друзьями:

Эластичность предложения

Виды юридических лиц

Субъект, объект, объективная, субъективная стороны правонарушения

Соотношение законности и правопорядка

Раннее средневековье. Апологетика. Патристика. Схоластика

Технология приготовления заправочных супов

Самый сильный аргумент, почему эволюция человека не могла быть