Зміна картинки через onMouseOver
Згадаймо обробники подій наMouseOver і onMouseOut. Ми вже робили щось схоже – за допомогою цих команд з'являвся текст у рядку стану. Ще раз зверніть увагу, що не потрібні теги . Обробники подій onMouseOver і onMouseOut вбудовуються в команду HTML. Скрипт:
В і вже знаєте про події достатньо, щоб розібрати скрипт. Коли прибираєте курсор із картинки, з'являється b.gif. Коли наводите картинку, з'являється а.gif.
Зверніть увагу, що команда IMG пов'язана з обробниками onMouse у команді HREF через команду NAME="pic1". Не має значення скільки зображень у вас на сторінці і в якому порядку вони розташовуються, якщо ви привласнили окреме ім'я кожній потрібній картинці.
onMouseOver і onMouseOut розрізняють регістр. Не можна змінювати великі та малі літери.
Оскільки необхідно ставити лапки після onMouseOver= і onMouseOut=, назва файлу *.gif ставиться в одинарні лапки.
document.pic1.srcслідує ієрархії об'єктів. Document відноситься до об'єкта документ, a pic1 - це ім'я об'єкта зображення (ім'я можна придумати будь-яке). src (джерело) - це властивість об'єкта зображення, яке вказує файл із зображенням.
У цьому прикладі onMouseOver змінює джерело зображення на а.gif.
ОnMouseOut змушує об'єкт зображення показувати b.gif.
Майте на увазі, що для найкращого ефекту зображення повинні бути однакового розміру.
Розглянуті вище команди наведено у прикладі 2.12, а результат виконання на рис. 2.12.
Приклад 2.12. Зміна картинки
Портрет далекого родича
2.11 Зміна картинок через функції
Функції виконують те саме, що й команди у минулому прикладі. Пам'ятайте ієрархіюоб'єктів: спочатку документ, потім ім'я, надане об'єкту і нарешті SRC. Функції названі up() та down().
Схема практично та сама, що й у минулому прикладі:
. і дві різні картинки:
Бачите, як нові функції пов'язані з новими іменами, робіть це щоразу, коли додаєте нову картинку.
Розглянуті вище команди наведено у прикладі 2.13. Якщо швидко водити мишею сюди-туди, кенгуру ніби підстрибує (рис.2.13).
Приклад 2.13. Зміна картинок через функцію