Этот сайт больше не обновляется. Сайт К. Полякова «Преподавание, наука и жизнь»
переехал по адресу kpolyakov.spb.ru.
Новый адрес страницы, к которой вы обратились:
Пожалуйста, обновите свои закладки. Через 5 секунд вы будете перенаправлены
на новый сайт автоматически.
Очень часто вы видите на Web-страницах в Интернете эффекты,
которые выходят за рамки обычного HTML.
Язык HTML не позволяет «оживлять» изображение на экране,
он задает способ размещения статической (не изменяющейся)
информации. С помощью HTML нельзя сделать
замену рисунков при попадании курсора мыши в область картинки
движение объекта по экрану
различные меню, которые выпадают при нажатии на кнопки
Все это можно создать с помощью языка программирования JavaScript
(его называют динамическим HTML), который
позволяет создавать анимацию на Web-страницах.
В качестве примера мы покажем, как с помощью JavaScript
выполнить замену рисунков при попадании курсора мыши в область картинки.
Основные идеи
Для того, чтобы лучше понять происходящее, надо знать следующее:
каждый элемент на странице, будь то текст, звук или видео, является объектом
и имеет свои параметры и свойства
параметры элемента можно менять
все что происходит — это события
все события можно «обрабатывать», то есть как-то реагировать на них
Самые простейшие события — это вход мыши в область и выход мыши из области объекта.
Но существует еще множество событий, при которых запускаются
специальные мини-программы — скрипты или сценарии на JavaScript.
Создание таких сценариев выходит за курс обычного HTML и этот материал
отсутствует на этом сайте.
Замена рисунка
Рассмотрим простейшие события — попадание мыши в область объекта и выход из нее.
Реакция на них задается в параметрах тэга <IMG>:
OnMouseOver — что делать, если курсор мыши попал в область рисунка
OnMouseOut — что делать, если курсор мыши вышел из области объекта
Обращение к текущему объекту идет через аргумент this
(от английского this — этот). Адрес рисунка задается параметром this.src
(это означает обращение к свойству src объекта this).
Сначала загружается рисунок image1.gif. При попадании мыши в область рисунка
вместо него появляется image2.gif, а после ухода мыши снова восстанавливается
image1.gif. В окне браузера рисунок будет выглядеть так
(в браузерах, поддерживающих JavaScript, он должен изменяться при наведении мыши):
JavaScript 
