 |
Главная Случайная страница Контакты | Мы поможем в написании вашей работы! | |
Смотрите задание №2, которое Вам необходимо выполнить
|
|
Часть третья
Ниже рассматривается еще один пример использования 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.jsp.newmail.ru"
onMouseOver="up()" onMouseOut="down()">
<IMG SRC="down.gif" NAME="mypic" BORDER=0>
</BODY>
</HTML>
Разбор скрипта
- Не забывайте про регистр и <script language= "javascript">
function up()
{
document.mypic.src="up.gif"
}
function down()
{
document.mypic.src="down.gif"
}
- Функции выполняют то же, что и команды. Сначала документ, потом имя, присвоенное объекту и наконец SRC. Функции названы up() и down().
<A HREF="http://www.newmail.ru"
onMouseOver="up()" onMouseOut="down()">
<IMG SRC="down.gif" NAME="mypic"
BORDER=0></A>
- Oбычно функция используется для многократных повторений.
- Если вы решите использовать многократные смены картинок с помощью JavaScript, помните, что каждый раз нужно давать функции и изображению новое имя. Например: вы хотите поместить на страницу еще один такой же скрипт. Для этого создаем новую функцию, копируя предыдущую и добавляя к ее названию цифру 2. Затем меняем имя рисунка на mypic2. Не забудьте поменять его и в строке img src="*.gif". Получаем следующее:
<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>
Видите, как новые функции связаны с новыми именами? Делайте это каждый раз при добавлении новой картинки.
Смотрите задание № 3, которое Вам необходимо выполнить.
Задания
Задание № 1
П ерепишите скрипт в виде функции. Если хотите, поэкспериментируйте с делением. Пусть функция запускается командой оnLoad.
Задание № 2
C оздайте страницу HTML. В центре поместите заголовок, под ним рисунок. Если навести мышь на изображение, оно должно меняться на другое и восстанавливаться, когда курсор уходит.
Задание № 3
Переделайте задание № 2, создав две функции для смены картинки.
Дата публикования: 2015-11-01; Прочитано: 323 | Нарушение авторского права страницы | Мы поможем в написании вашей работы!
