Лабораторная работа № 9. Работа с изображениями на JavaScript

2019-11-13

480

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 1 2 3 4 567 8 9 10 Следующая ⇒

4 часа

Изображения в html-документах предстаются в виде массива, что позволяет адресоваться к ним. Они имеют определенные свойства и рассматриваются как объекты image, к которым можно обращаться из языка JavaScript. Например, можно определить размер изображения, обратившись к его свойствам width и height. То есть по записи document.images[0].width можно определить ширину первого изображения в пикселях на web-странице.

Объект Image позволяет вносить изменения в графические образы на web-странице, что позволяет создавать мультипликацию.

Для отслеживания индекса всех изображений веб-страницы необходимо назначить им имена с помощью тэга

Тогда для обращения к изображению необходимо написать document.myImage или document.images["myImage"].

Смена изображения на web-странице выполняется с использованием атрибута src, который содержит адрес представленного изображения, и позволяет назначить ему новый адрес. В результате изображение будет загружено с этого нового адреса, заменяя на web-странице старое:

Здесь загружается изображение img1.gif и получает имя myImage. В следующей строке прежнее изображение img1.gif заменяется на новое – img2.gif:

document.myImage.src= "img2.src".

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

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

Для создания слоев можно использовать тэг <layer> или тэг <ilayer>. При этом можно воспользоваться следующими параметрами:

name = "layerName" – название слоя;

left = xPosition – абсцисса левого верхнего угла;

top = yPosition – ордината левого верхнего угла;

z-index = layerIndex – номер индекса для слоя;

width = layerWidth – ширина слоя в пикселах;

clip = "x1_offset, y1_offset, x2_offset, y2_offset" – видимаю область слоя;

above = "layerName" – определяет, какой слой окажется под нашим;

below = "layerName" – определяется, какой слой окажется над нашим;

visibility= show|hide|inherit – видимость этого слоя;

bgcolor = "rgbColor" – цвет фона, или название стандартного цвета, либо rgb-запись;

background = "imageURL" – фоновая картинка.

Тэг <layer> используется для слоев, которые можно точно позиционировать. Если не указать положение слоя с помощью параметров left и top, то по умолчанию он помещается в верхний левый угол окна.

Тэг <ilayer> создает слой, положение которого определяется при формировании документа.

Поверх изображения или под ним можно показать текст.

Свойства слоев можно изменять с помощью скриптов на JavaScript. Например, в следующей строке задается горизонтальное положение слоя, смещенное на 200 пикселов:

document.layers["myLayer2"].left = 200;

Следующий пример демонстрирует, как скрипт может реагировать на сигналы о нажатии клавиш.

<html>

window.captureEvents(Event.KEYPRESS);

window.onkeypress= pressed;

function pressed(e) {

alert("Key pressed! ASCII-value: " + e.which);

}

</script>

</html>

Порядок выполнения работы: создать html-документ, элементы и параметры которого указаны в таблице 9.1.

Таблица 9.1 – Варианты заданий

№ Вари-ант	Количествово графических элементов (слоев)	Ортентация группы элементов	Изображения меняются местами	При наведении курсора
1	3	Горизонтально	При наведении курсора	Увеличить на 25%
2	4	Горизонтально	При наведении курсора	Увеличить на 40%
3	3	Вертикально	По щелчку мыши	Уменьшить на 30%
4	4	Вертикально	По щелчку мыши	Уменьшить на 40%
5	3	Горизонтально	При наведении курсора	Увеличить на 35%
6	4	Горизонтально	При наведении курсора	Увеличить на 45%
7	3	Вертикально	По щелчку мыши	Уменьшить на 35%
8	4	Вертикально	По щелчку мыши	Уменьшить на 50%
9	3	Горизонтально	При наведении курсора	Увеличить на 30%
10	4	Горизонтально	При наведении курсора	Увеличить на 45%
11	3	Вертикально	По щелчку мыши	Уменьшить на 20%
12	4	Вертикально	По щелчку мыши	Уменьшить на 45%

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

1. Для чего предназначен объект Image?

2. Как в html-документах представляются изображения?

3. Как из JavaScript можно адресоваться к изображениям?

4. Для чего служит атрибут src тэга <img>?

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

6. Поясните назначение функции preload().

7. Какой объект позволяет вносить изменения в графические образы на web-странице для создания мультипликации?

8. Что позволяет делать изображения в браузерах невидимыми?

9. Какой тег используется для создания слоев?

10. Как изменить свойство слоя?

2019-11-13

480

Обсуждений (0)

0.00 из 5.00 0 оценок

⇐ Предыдущая 1 2 3 4 567 8 9 10 Следующая ⇒

Обсуждение в статье: Лабораторная работа № 9. Работа с изображениями на JavaScript

Обсуждений еще не было, будьте первым... ↓↓↓