Практическое занятие №24

Наименование: Использование рисунков и анимации в сценариях JavaScript

1. Цель: Научиться создавать изменяющиеся рисунки средствами JavaScript

2. Подготовка к занятию: По предложенной литературе повторить тему «Добавление рисунков и анимации в JavaScript» и ответить на следующие вопросы:

2.1 Какой тег используется для вставки рисунков на веб – страницу?

2.2 Чем рисунок отличается от анимации?

2.3 Какие форматы изображений можно использовать в веб – дизайне?

3. Литература:

3.1 Шомас Е.А. Конспект лекций по дисциплине «Распределенные системы обработки информации»

3.2 Никсон Р. Создаем динамические веб-сайты с помощью PHP, MySQL и JavaScript. – СПб.: Питер, 2011. – 496 с

4. Перечень оборудования и программного обеспечения:

4.1 ПЭВМ, подключенные к сети Интернет

4.2 Браузеры

4.3 Текстовый редактор

5. Задание:

5.1 Создать веб – страницу, на которую поместить четыре рисунка. При наведении на рисунок курсора мыши, он должен заменяться другим рисунком. Если курсор мыши выходит за пределы объекта, рисунок меняется на первоначальный вид.

6. Порядок выполнения работы:

6.1.1 При выполнении первого задания в тег вставки рисунка необходимо поместить обработчик события: <IMG src="ris1.jpeg" width=150 height=150 border="1"

onMouseOver = "document.images[0].src='ris2.jpeg';">

6.1.2 Также необходимо помнить, что все изображения на странице представлены как коллекция images. Причем, первый рисунок, всегда обозначается как images [0], второй images [1] и так далее. Таки образом, чтобы получить доступ к первому изображению, необходимо записать в сценарии document.images[0].

7. Содержание отчета:

7.1 Наименование и цель работы

7.2 Код программы

7.3 Ответы на контрольные вопросы

7.4 Вывод о проделанной работе

8. Контрольные вопросы:

8.1 Что такое динамический рисунок?

8.2 С помощью какого массива изменяются рисунки динамически?

8.3 Как преобразовать динамический рисунок в изменяющийся?

ПРИЛОЖЕНИЕ:

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

Рисунки изменяются динамически с помощью массива images. Этот массив состоит из элементов, каждый из которых соответствует отдельному изображению, сохраненному на сервере. Каждый элемент массива имеет свое имя. Каждый объект image имеет следующие свойства:

· border – определяет границы рисунка

· complete – определяет степень загруженности рисунка

· height и width –задают размеры рисунка. Это полностью информационные свойства, изменять их при создании динамических рисунков нельзя.

· hspace и vspace – определяет место расположения рисунка на странице.

· name – имя рисунка

· src – источник рисунка

Объект image не обладает ни одним методом, но позволяет применять три обработчика событий.

· onLoad – запускается после окончания загрузки рисунка

· onAbort – запускается при отмене пользователем загрузки страницы, на которой еще не отражены рисунки

· onError – запускается, если файл рисунка поврежден или не найден.

Чаще всего динамические рисунки применяются для создания изменяющихся рисунков, которые меняют вид при наведении на них указателя мыши. Преобразовать изображение в изменяющийся рисунок можно с помощью обработчика событий onMouseOver, который позволяет заменить один рисунок другим.