На главную страницу сайта К. Полякова
Преподавание, наука и жизнь.
 
главная школа вуз наука delphi программы походы автор
 Лента новостей Новости Блог Блог 

 

Электронный учебник по языку HTML

HTML

Javascript

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

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

Очень часто вы видите на Web-страницах в Интернете эффекты, которые выходят за рамки обычного HTML. Язык HTML не позволяет «оживлять» изображение на экране, он задает способ размещения статической (не изменяющейся) информации. С помощью HTML нельзя сделать

  • замену рисунков при попадании курсора мыши в область картинки
  • движение объекта по экрану
  • различные меню, которые выпадают при нажатии на кнопки

Все это можно создать с помощью языка программирования JavaScript (его называют динамическим HTML), который позволяет создавать анимацию на Web-страницах. В качестве примера мы покажем, как с помощью JavaScript выполнить замену рисунков при попадании курсора мыши в область картинки.

Основные идеи

Для того, чтобы лучше понять происходящее, надо знать следующее:

  • каждый элемент на странице, будь то текст, звук или видео, является объектом и имеет свои параметры и свойства
  • параметры элемента можно менять
  • все что происходит — это события
  • все события можно «обрабатывать», то есть как-то реагировать на них

Самые простейшие события — это вход мыши в область и выход мыши из области объекта. Но существует еще множество событий, при которых запускаются специальные мини-программы — скрипты или сценарии на JavaScript. Создание таких сценариев выходит за курс обычного HTML и этот материал отсутствует на этом сайте.

Замена рисунка

Рассмотрим простейшие события — попадание мыши в область объекта и выход из нее. Реакция на них задается в параметрах тэга <IMG>:

  • OnMouseOver — что делать, если курсор мыши попал в область рисунка
  • OnMouseOut — что делать, если курсор мыши вышел из области объекта

Обращение к текущему объекту идет через аргумент this (от английского this — этот). Адрес рисунка задается параметром this.src (это означает обращение к свойству src объекта this).

Код будет выглядеть следующим образом:

<IMG SRC="image1.gif"
      onMouseOver="this.src='image2.gif'"
      onMouseOut="this.src='image1.gif'">

Сначала загружается рисунок image1.gif. При попадании мыши в область рисунка вместо него появляется image2.gif, а после ухода мыши снова восстанавливается image1.gif. В окне браузера рисунок будет выглядеть так (в браузерах, поддерживающих JavaScript, он должен изменяться при наведении мыши):

Valid XHTML 1.0 Transitional

© 2000-2016 К. Поляков
 

В Контакте