HTML

Javascript

очень кратко о главном

Зачем это нужно?

Очень часто вы видите на 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, он должен изменяться при наведении мыши):