Инструменты пользователя
object_image
Различия
Показаны различия между двумя версиями страницы.
|
object_image [2019/02/08 23:01] |
object_image [2020/06/13 13:46] (текущий) |
||
|---|---|---|---|
| Строка 1: | Строка 1: | ||
| + | ====== Object Image ====== | ||
| + | Рисунки на странице размещаются при помощи элемента <img />. В объектной модели документа каждый такой элемент представляется объектом Image. Все изображения в документе содержатся в массиве document.images. | ||
| + | |||
| + | Для того, чтобы работать с изображением, | ||
| + | < | ||
| + | < | ||
| + | <img src=" | ||
| + | </body | ||
| + | </ | ||
| + | Доступ к изображению, | ||
| + | < | ||
| + | image_ref1 = document.images[0]; | ||
| + | image_ref2 = document.images[" | ||
| + | </ | ||
| + | где image_ref2 - переменная, | ||
| + | |||
| + | Кроме того, если в элемент <img /> включен атрибут id, к изображению можно получить доступ как к любому другому элементу страницы (либо используя идентификатор изображения как переменную типа Image, либо воспользовавшись методом document.getElementById() для получения ссылки на объект). | ||
| + | |||
| + | Получив ссылку на изображение, | ||
| + | |||
| + | Свойства объекта Image | ||
| + | < | ||
| + | Свойство Пояснение | ||
| + | alt Альтернативный текст | ||
| + | complete Возвращает true, если объект загружен полностью, | ||
| + | src Адрес загруженного в объект изображения | ||
| + | width Ширина изображения | ||
| + | height Высота изображения | ||
| + | </ | ||
| + | Кроме того, в JavaScript для объекта Image определены три события, | ||
| + | |||
| + | Таблица. События объекта Image Событие Причина возникновения | ||
| + | < | ||
| + | load Изображение полностью загружено | ||
| + | abort Загрузка страницы была прервана пользователем | ||
| + | error Загрузка изображения невозможна по каким либо причинам (не найден файл изображения, | ||
| + | </ | ||
| + | При необходимости (а она возникает довольно часто), | ||
| + | < | ||
| + | image_object = new Image(); | ||
| + | image_object = new Image(width, | ||
| + | </ | ||
| + | где image_object - объект Image. Конструктор Image() может вызываться с атрибутами width и height, задающими размеры загружаемого изображения. После создания объекта Image, его свойству src необходимо присвоить строку, | ||
| + | |||
| + | Если конструктор объекта Image был вызван с параметрами width и height, то после присваивании значения свойству src браузер начнет выполнять фоновую загрузку изображения с сервера в кэш браузера. Такой прием называется предзагрузкой изображения и используется в тех случаях, | ||
| + | ====== Пример. Предзагрузка изображений. ====== | ||
| + | Принцип предзагрузки состоит в том, что при любом обращении к графическому (и не только) файлу на сервере, | ||
| + | |||
| + | Обеспечить кеширование графического файла можно, создав объект типа Image, в конструктор которого переданы точные размеры загружаемого изображения. После этого необходимо присвоить свойству src созданного объекта адрес требуемого графического файла. | ||
| + | |||
| + | Как же дождаться загрузки всех изображений? | ||
| + | |||
| + | В процессе загрузки пользователь будет видеть над изображением диагностическое сообщение о прогрессе загрузки (" | ||
| + | < | ||
| + | < | ||
| + | <i id=" | ||
| + | <br /> | ||
| + | <img src=" | ||
| + | <br /> | ||
| + | <a href="#" | ||
| + | |||
| + | <script type=" | ||
| + | var currentImage = 0, count = 0; | ||
| + | var path = new Array(" | ||
| + | var img = new Array (); | ||
| + | |||
| + | for (var i=0; i < path.length; | ||
| + | img[i] = new Image (320, 240); | ||
| + | img[i].src = path[i]; | ||
| + | img[i].onload = countImages; | ||
| + | } | ||
| + | |||
| + | function countImages () { | ||
| + | count++; | ||
| + | if (count == path.length) | ||
| + | info.innerText = " | ||
| + | else | ||
| + | info.innerText = " | ||
| + | |||
| + | } | ||
| + | |||
| + | function nextImage() { | ||
| + | if (count != path.length) { | ||
| + | alert (" | ||
| + | return; | ||
| + | } | ||
| + | currentImage++; | ||
| + | if (currentImage == path.length) | ||
| + | currentImage = 0; | ||
| + | document.images[" | ||
| + | return false; | ||
| + | } | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | ====== Пример. Ролловеры. ====== | ||
| + | Ролловером называют эффект, | ||
| + | |||
| + | Ниже перечислены основные шаги и принципы создания ролловеров: | ||
| + | |||
| + | * Создайте три изображения, | ||
| + | * " | ||
| + | * " | ||
| + | * " | ||
| + | * Проведите предзагрузку всех изображений ролловера. | ||
| + | * Обработайте следующие события: | ||
| + | * onmouseover - смена " | ||
| + | * onmouseout - смена " | ||
| + | * onmousedown - смена " | ||
| + | * onmouseup - смена " | ||
| + | < | ||
| + | < | ||
| + | <img src=" | ||
| + | | ||
| + | | ||
| + | | ||
| + | | ||
| + | |||
| + | <script type=" | ||
| + | var count = 0; | ||
| + | var path = new Array (" | ||
| + | " | ||
| + | | ||
| + | var img = new Array (); | ||
| + | for (var i=0; i< | ||
| + | img[i] = new Image (202, 42); | ||
| + | img[i].onload = countImages; | ||
| + | img[i].src = path[i]; | ||
| + | } | ||
| + | |||
| + | |||
| + | function countImages () { | ||
| + | count++; | ||
| + | } | ||
| + | |||
| + | function changeImage (index) { | ||
| + | if (count == img.length) | ||
| + | document.images[" | ||
| + | } | ||
| + | |||
| + | </ | ||
| + | < | ||
| + | </ | ||
| + | |||