Простенькая анимация
Вот вам еще один пример использования onMouseOver и onMouseOut. На этот раз обработчики событий onMouseOver и onMouseOut вызывают функцию.
В общем, когда вам нужна только одна команда JavaScript, можно включить ее целиком в <A HREF>. Для многократного повторения больше подходит функция.
Скрипт
<HTML>
<HEAD>
<title></title>
<SCRIPT
LANGUAGE="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.narod.ru"
onMouseOver="up()"
onMouseOut="down()">
<IMG SRC="down.gif" NAME="mypic"
BORDER=0>
</BODY>
</HTML>
Результат
|
Простенькая анимация |
|
Быстро водить мышью туда-сюда.
Разбор скрипта
function up()
{
document.mypic.src="up.gif"
}
function down()
{
document.mypic.src="down.gif"
}
<A HREF="http://www.narod.ru"
onMouseOver="up()"
onMouseOut="down()">
<IMG SRC="down.gif" NAME="mypic"
BORDER=0></A>
<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.htmlgoodies.com"
onMouseOver="up()"
onMouseOut="down()">
<IMG SRC="down.gif" NAME="mypic"
BORDER=0></A>
<a
href="http://www.htmlgoodies.com"
onMouseOver="up2()"
onMouseOut="down2()">
<IMG SRC="down.gif" NAME="mypic2"
BORDER=0></A>
Видите, как новые функции связаны с новыми именами? Делайте это каждый раз при добавлении новой картинки.
Ваше задание
Переделайте прошлое задание, создав две функции для смены картинки.
Возможный ответ здесь
