Лабораторная работа 17 Изображения на Web-странице.

Цель работы: освоить способы внедрения изображения на Web-странице.

1. Теоретические сведения:

В браузере рисунки рассматриваются как объекты image, а все рисунки, содержащиеся в текущем документе, помещаются в массив images, который можно использовать для обращения к любому рисунку, определяемому тегом <img>. В частности, можно динамически обновлять изображения, изменяя их свойство src.

Для обращения к свойствам объекта image используется следующий синтаксис:

document.images[i].propertyName

где i - индекс элемента массива, который соответствует нужному рисунку. Первым рисунком в документе будет document.images[0]. Массив images является свойством объекта document, поэтому при обращении к рисунку необходим префикс document к имени массива. Тег <img> не имеет атрибута name, поэтому выражение вида "document.imgName" приведет к ошибке.

Свойства

Все свойства объектов image соответствуют атрибутам тега <img>, за исключением свойства complete. Эти свойства, кроме свойств src и lowsrc, значения которых могут быть изменены динамически, имеют значения только для чтения:

src - соответствует атрибуту src тега <img>; height - соответствует атрибуту height тега <img>; width - соответствует атрибуту width тега <img>; border - соответствует атрибуту border тега <img>; vspace - соответствует атрибуту vspace тега <img>; hspace - соответствует атрибуту hspace тега <img>; complete - содержит булево значение, которое указывает, загружен рисунок в браузер или нет (true - загружен, false - нет);

Методы и обработчики событий

Объект image не имеет методов.

Обработчики событий:

onAbort - обработка события, возникающего при прерывании загрузки рисунка, т.е. при нажатии клавиши [Esc] или активизации новой гиперсвязи, в то время, когда рисунок загружается; onError - обработка события, связанного с ошибкой загрузки рисунка, т.е. когда невозможно найти рисунок по указанному адресу URL ; onLoad - соответствующее событие, инициализируется в начале загрузки рисунка. При загрузке анимированного GIF-а это событие возникает несколько раз и зависит от числа кадров анимационной последовательности.

2. Задания:

2.1 Задание №1

Создайте страницу HTML. В центре поместите заголовок, под ним рисунок. Если навести мышь на изображение, оно должно меняться на другое и восстанавливаться, когда курсор уходит.

Указания:

1. Тэги <SCRIPT> и </SCRIPT> не требуются. Обработчики событий onMouseOver и onMouseOut встраиваются в команду HTML <A HREF>.

2. Обратите внимание, что команда IMG связана с обработчиками onMouse в команде HREF через команду NAME="pic1". Не имеет значения, сколько изображений у вас на странице и где они располагаются, если вы дали имя нужной картинке.

3. document.pic1.src следует иерархии объектов, о которой мы говорили . Document относится к объекту документ, a pic1 — это имя объекта изображение (имя можно придумать какое угодно). src (источник) — это свойство объекта изображение, которое указывает файл с картинкой.

4. Помните, что для наилучшего эффекта картинки должны быть одинакового размера.

2.2 Задание №2

Пользователь щелкает по ссылке и переходит к следующей картинке. Мы воспользуемся командой If и переменной num.

Разбор скрипта

Разобьем его на две части:

<SCRIPT LANGUAGE="javascript">           var num=1           img1 = new Image ()           img1.src = "leo.gif"           img2 = new Image ()           img2.src = "dino.gif"           img3 = new Image ()           img3.src = "rhino.gif"  

num=1 не находится внутри функции. Да и вообще ни одна команда не находится внутри функции. num — это переменная. Указывая ее в начале скрипта вне функции, мы делаем ее глобальной переменной, то есть, доступной для любой функции.

img1 = new Image() объявляет новый объект image (рисунок). img1.src= источник объекта, файл, в котором хранится картинка. Это стандартная схема. img1 хранится в pic1.gif ; img2 хранится в pic2.gif. (В скобках) содержится информация о ширине и высоте рисунка. Это не обязательно, но желательно.

Рисунки тоже доступны для любой функции. Таким образом программа загружает рисунки в память компьютера. Для следующего примера это будет еще важнее. Пользователь не хочет ждать, пока каждая картинка будет загружаться с сервера.

Теперь часть №2:

Первоначальное значение num равно 1. Это было еще в первом фрагменте. Когда пользователь щелкает по строчке текста, запускается функция slideshow.

slideshow() прибавляет к num единицу. Если num = 4, num возвращается к 1. document.animal.src меняется на img плюс значение num и плюс .src. Например, если num = 1, то document.animal.src становится img1.src.

Обратите внимание, что команда eval() преобразует img1.src в источник изображения. Без нее это был бы простой набор букв.

И наконец:

<a href="JavaScript:slideshow()">

Щелкните, чтобы увидеть следующую картинку</a>

Тут кое-что новенькое. Видите, вызывается не функция, а JavaScript? Так используются все части скрипта, а не только те, что стоят внутри функции. Если вы напишете функцию по обычной схеме, то у вас не будет рисунков, потому что они останутся за скобками.

В Эксплорере работает и обычная схема, то есть:

<a href="" onClick="slideshow()">Щелкайте</a>

2.3 Задание №3

С помощью JavaScript создается анимационная картинка. Для анимации особенно важно, чтобы все изображения были заранее загружены в память компьютера. Помните, как это делается? Через команды new Image() и img.src, стоящие вне функции.

Функция:

startshow() содержит кое-что новое, вложенные циклы (nested loops)! Видите, внутри первого цикла for находится второй. (Слово for повторяется дважды.) Второй цикл замедляет смену картинок, чтобы пользователь смог их разглядеть.

Обратите внимание, в {фигурных скобках} цикла ничего нет. Вложенный цикл считает от 1 до 800 после появления каждой картинки. На это уходят доли секунды.

Внешний цикл заставляет программу повторяться 21 раз. Видите, это обозначено в функции: for (i=1; i<21; i=i+1). Так как анимация состоит из трех картинок, она будет повторена 7 раз: 7 X 3 = 21.

Когда цикл закончится, картинка снова вернется к pic1.gif.

Вот команда, которая помещает первое изображение на страницу:

<IMG SRC="pic1.gif" NAME="mypic"BORDER=0>

И наконец ссылка, которая запускает анимацию:

<A HREF="JavaScript:startshow()">Display animation</a>

Снова команда HREF указывает на JavaScript:функция(), чтобы все переменные были доступны.