Система уроков по JavaScript

Работа с графическими изображениями

Для того, чтобы встроить растровое изображение в документ HTML, необходимо использовать оператор <IMG>. Общий вид этого оператора показан ниже:

<IMG SRC="Адрес_файла_изображения"
  NAME="Имя_изображения"
    . . .
  WIDTH="Ширина"
  HEIGHT="Высота">

Параметры оператора <IMG> определяют адрес файла с изображением, выравнивание текста, расположенного возле изображения, размеры изображения, альтернативный текст и так далее.

К графическим изображениям, размещенным в документе HTML, можно обращаться как к элементам массива document.images (первое изображение адресуется как document.images[0]). Однако в большинстве случаев удобнее пользоваться именами изображений, определенными параметром NAME оператора <IMG>.

Все свойства объектов image соответствуют основным атрибутам тега <IMG>, за исключением свойства complete. Набор данных свойств приведен ниже:

Свойство	Описание
border	Ширина рамки в пикселах вокруг изображения
complete	Содержит булево значение, которое указывает, загружен рисунок в браузер или нет (true - загружен, false - нет)
height	Высота изображения в пикселах или процентах от размера окна (ячейки таблицы)
hspace	Ширина свободного пространства в пикселах, отделяющее изображение от текста по горизонтали
src	Адрес URL файла с растровым графическим изображением
vspace	Ширина свободного пространства в пикселах, отделяющее изображение от текста по вертикали
width	Ширина изображения в пикселах или процентах от размера окна (ячейки таблицы)

С объектом image связано три события:

Событие	Описание
onAbort	Возникает при прерывании загрузки рисунка (при нажатии клавиши [Esc] или активизации новой гиперсвязи, в то время, когда рисунок загружается)
onError	Событие, связанное с ошибкой загрузки рисунка (когда невозможно найти рисунок по указанному адресу URL)
onLoad	Событие, возникающее в начале загрузки рисунка

Динамическая замена растровых изображений

Одна из наиболее интересных возможностей, доступных при использовании сценариев JavaScript, заключается в динамической замене графических изображений, указанных в параметре SRC оператора <IMG>. Например, в следующей строке сценария JavaScript указано, что изображение с именем btn1 должно иметь адрес URL pic/aurap.gif:

document.btn1.src="pic/aurap.gif"

Что произойдет при выполнении приведенной выше строки сценария? Область, выделенная в окне браузера для растрового изображения btn1 будет заполнена изображением pic/aurap.gif. Если до этого там было другое изображение, оно будет заменено на новое.

Как можно воспользоваться динамической заменой растровых изображений? Как правило, динамическую замену используют для создания графических ссылок, которые изменяют свой вид, когда над ними находится курсор мыши. Рассмотрим пример сценария.

Пусть в документе HTML находятся две графические ссылки. Сделаем так, чтобы при наведении на эти ссылки курсора мыши происходила "подсветка" изображения. Для этого надо заготовить по две картинки на каждую из графических ссылок и установить обработчики событий onMouseOver и onMouseOut для соответствующих тэгов <A>.

Листинг 5.1.

<HTML>
  <BODY>
  <P>
  <CENTER>
  <A HREF="disket.htm" 
    onMouseOver="document.btn1.src='img12.jpg'" 
    onMouseOut="document.btn1.src='img11.jpg'"><IMG 
    SRC="img11.jpg" NAME = "btn1" BORDER=0></A>
  <A HREF="book.htm" 
    onMouseOver="document.btn2.src='img22.jpg'" 
    onMouseOut="document.btn2.src='img21.jpg'"><IMG 
    SRC="img21.jpg" NAME = "btn2" BORDER=0></A>
  </CENTER>  
  </BODY>
</HTML>

В данном примере для оператора ссылки <A> определены обработчики событий onMouseOver и onMouseOut:

onMouseOver="document.btn1.src='img12.jpg'" 
onMouseOut="document.btn1.src='img11.jpg'"

Когда курсор мыши оказывается над ссылкой (то есть над графическим изображением ссылки), управление получает обработчик события onMouseOver. Этот обработчик загружает изображение img12.jpg, где исходная картинка "посвечивается". После того как пользователь убирает курсор мыши с поверхности кнопки, в дело включается обработчик события onMouseOut. Он восстанавливает исходное изображение, указанное в параметре SRC оператора <IMG>.

Посмотреть пример работы данного скрипта

В качестве еще одного примера можно привести скрипт, позволяющий представить несложную коллекцию картинок в одном единственном документе HTML. Пример можно посмотреть здесь.

Ожидание загрузки всех изображений

Один из недостатков приведенного выше подхода смены графических изображений может заключаться в том, что после записи в src нового адреса начинает процесс загрузки соответствующего изображения. И поскольку этого не было сделано заранее, то еще пройдет некоторое время, прежде чем новое изображение будет передано через Интернет и встанет на свое место. В некоторых ситуациях это допустимо, однако часто подобные задержки неприемлемы.

Решением проблемы является упреждающая загрузка изображений. Для этого в программе создаются переменные (возможно, массив), содержащие объекты Image. В эти переменные производится упреждающая загрузка. Например:

hiddenImg= new Image();
hiddenImg.src= "img3.gif";

В первой строке создается новый объект Image. Вторая строка инициирует загрузку изображения img3.gif и сохранение его в переменной hiddenImg. После загрузки изображения, управление передается следующей строке сценария.

Чтобы вызвать изображение на экран, можно воспользоваться командой:

document.myImage.src= hiddenImg.src;

В этом случае изображение немедленно извлекается из кэша и показывается на экране. Ниже приведен листинг модифицированного примера сценария, меняющего вид графической ссылки при наведении курсора мыши и осуществляющего предварительную загрузку изображений:

Листинг 5.2.

<HTML>
  <HEAD>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
  hiddenImg11= new Image();
  hiddenImg12= new Image();
  hiddenImg21= new Image();
  hiddenImg22= new Image();
  hiddenImg11.src= "img11.jpg";
  hiddenImg12.src= "img12.jpg";
  hiddenImg21.src= "img21.jpg";
  hiddenImg22.src= "img22.jpg";
  //-->
  </SCRIPT>
  </HEAD>
  <BODY>
  <P>
  <CENTER>
  <A HREF="disket.htm" 
    onMouseOver="document.btn1.src=hiddenImg12.src" 
    onMouseOut="document.btn1.src=hiddenImg11.src"><IMG 
    SRC="img11.jpg" NAME = "btn1" BORDER=0></A>
  <A HREF="book.htm" 
    onMouseOver="document.btn2.src=hiddenImg22.src" 
    onMouseOut="document.btn2.src=hiddenImg21.src"><IMG 
    SRC="img21.jpg" NAME = "btn2" BORDER=0></A>
  </CENTER>  
  </BODY>
</HTML>

Посмотреть пример работы данного скрипта