|
После прохождения теоретической части пришло письмо об окончании теоретической части курса, будет ли практическая часть? |
Инспектор
Вы можете этот курс.
Опубликован: 19.10.2006 | Уровень: для всех | Доступ: платный
Лекция 17:
Изменение изображения с помощью функции
< Лекция 16 || Лекция 17 || Лекция 18 >
Аннотация: Динамическое изменение изображений с помощью функций.
Концепция
Вот еще один пример использования onMouseOver и onMouseOut. На этот раз вместо включения оператора JavaScript для смены картинки в тег <A HREF> обработчики событий onMouseOver и onMouseOut вызывают функцию.
В общем, когда нужна только одна команда JavaScript, можно включить ее в тег HTML <A HREF>. Для нескольких операторов JavaScript больше подходит функция. В реальном мире на странице часто требуется многократное изменение изображения с помощью JavaScript.
Сценарий
<HTML>
<HEAD>
<title> Пример JavaScript </title>
<SCRIPT type="text/javascript">
function up()
{
document.mypic.src="up.gif"
}
function down()
{
document.mypic.src="down.gif"
}
</SCRIPT>
</HEAD>
<BODY>
<CENTER>
<h2>Пример анимации</h2>
<A HREF="http://www.intuit.ru"
onMouseOver="up()" onMouseOut="down()">
<IMG SRC="down.gif" NAME="mypic" BORDER=0></A>
</BODY>
</HTML>Результат работы сценария
Пример анимации с помощью 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().
Теперь посмотрим на вызов функции:
<A HREF="http://www.intuit.ru" onMouseOver="up()" onMouseOut="down()"> <IMG SRC="down.gif" NAME="mypic" BORDER=0></A>
Формат почти такой же, как и использованный в Уроке 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>... и примерно следующее для вызова двух различных изображений:
<A HREF="http://www.intuit.ru"
onMouseOver="up()"
onMouseOut="down()">
<IMG SRC="down.gif" NAME="mypic"
BORDER=0></A><a href="http://www.intuit.ru"
onMouseOver="up2()"
onMouseOut="down2()">
<IMG SRC="down.gif" NAME="mypic2"
BORDER=0></A>Видите, как новые функции связаны с новыми именами? Делайте это каждый раз при добавлении новой меняющейся картинки. Если требуется три случая, то добавьте цифру 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>< Лекция 16 || Лекция 17 || Лекция 18 >
Елена Сапегова
Эдуард Семынин
|
Здравствуйте. Перестали быть видны лекции и тесты практикума по программированию на JavaScript. Уже второй день из моего аккаунта виден лишь план занятий. В чем может быть проблема?
|
