Object Image
Рисунки на странице размещаются при помощи элемента <img />. В объектной модели документа каждый такой элемент представляется объектом Image. Все изображения в документе содержатся в массиве document.images.
Для того, чтобы работать с изображением, загруженным на страницу, необходимо получить к нему доступ. Это можно сделать несколькими способами. Наиболее предпочтительным является использования свойства document.images.
<body>
<img src="image.gif" name="first" />
</body
Доступ к изображению, добавленному в предыдущем примере можно получить следующим образом:
image_ref1 = document.images[0]; image_ref2 = document.images["first"];
где image_ref2 - переменная, в которой сохраняется ссылка на изображение.
Кроме того, если в элемент <img /> включен атрибут id, к изображению можно получить доступ как к любому другому элементу страницы (либо используя идентификатор изображения как переменную типа Image, либо воспользовавшись методом document.getElementById() для получения ссылки на объект).
Получив ссылку на изображение, вы можете оперировать следующими свойствами объекта Image:
Свойства объекта Image
Свойство Пояснение alt Альтернативный текст complete Возвращает true, если объект загружен полностью, и false - в противном случае src Адрес загруженного в объект изображения width Ширина изображения height Высота изображения
Кроме того, в JavaScript для объекта Image определены три события, позволяющие отслеживать загрузку изображения. Они перечислены в таблице ниже:
Таблица. События объекта Image Событие Причина возникновения
load Изображение полностью загружено abort Загрузка страницы была прервана пользователем error Загрузка изображения невозможна по каким либо причинам (не найден файл изображения, формат не поддерживается браузером и т.п.)
При необходимости (а она возникает довольно часто), объект Image можно создать средствами сценария явным образом. Для этого необходимо вызвать конструктор объекта Image():
image_object = new Image(); image_object = new Image(width, height)
; где image_object - объект Image. Конструктор Image() может вызываться с атрибутами width и height, задающими размеры загружаемого изображения. После создания объекта Image, его свойству src необходимо присвоить строку, содержащую адрес графического файла.
Если конструктор объекта Image был вызван с параметрами width и height, то после присваивании значения свойству src браузер начнет выполнять фоновую загрузку изображения с сервера в кэш браузера. Такой прием называется предзагрузкой изображения и используется в тех случаях, когда на страницу загружается изображение большого размера или множество небольших изображений.
Пример. Предзагрузка изображений.
Принцип предзагрузки состоит в том, что при любом обращении к графическому (и не только) файлу на сервере, браузер скачивает его сохраняет на жестком диске в специальной папке (для браузера Microsoft Internet Explorer это папка Temporary Internet Files и папке профиля каждого пользователя). Этот процесс называется кешированием. "Время жизни" кешированных файлов определяется настройками браузера. Таким образом, нам необходимо поочередно "обратиться" ко всем нужным изображениям на сервере и дождаться окончания их загрузки, после чего разрешить пользователю работать.
Обеспечить кеширование графического файла можно, создав объект типа Image, в конструктор которого переданы точные размеры загружаемого изображения. После этого необходимо присвоить свойству src созданного объекта адрес требуемого графического файла.
Как же дождаться загрузки всех изображений? Из материала предыдущего раздела вы узнали, что при успешной загрузке изображения объект Image генерирует событие load. Таким образом, обрабатывая данное событие, мы можем накапливать в некоторой переменной (например - count) количество загруженных на данный момент изображений и выводить соответствующую информацию и лишить пользователя возможности смены изображения до окончания процесса загрузки.
В процессе загрузки пользователь будет видеть над изображением диагностическое сообщение о прогрессе загрузки ("Загружено N из M изображений…"). При попытке перейти на следующее изображение не дождавшись загрузки всей галереи, пользователь получит сообщение о невозможности такого шага на данном этапе работы.
<body>
<i id="info">Загрузка изображений...</i>
<br />
<img src="../images/frukti.jpg" name="picture" />
<br />
<a href="#" onclick="return nextImage()">Следующее изображение</a>
<script type="text/javascript">
var currentImage = 0, count = 0;
var path = new Array("../images/frukti.jpg", "../images/kubiki.jpg", "../images/dino.jpg", "../images/indiana.jpg");
var img = new Array ();
for (var i=0; i < path.length; i++) {
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 = "Загрузка изображений: " + count + " из " + path.length;
}
function nextImage() {
if (count != path.length) {
alert ("Дождитесь пожалуйста загрузки всех изображений!");
return;
}
currentImage++;
if (currentImage == path.length)
currentImage = 0;
document.images["picture"].src = img[currentImage].src;
return false;
}
</script>
</body>
Пример. Ролловеры.
Ролловером называют эффект, возникающий при наведении курсора мыши на изображение и при уведении курсора с него (дополнительно, при желании, можно обработать нажатие и отпускание кнопок мыши). Принцип действия эффекта достаточно прост: при возникновении определенного события заменить рисунок на другой, при уведении - восстановить прежний. Это очень похоже не то, что мы делали в одном из предыдущих разделов при создании кнопки.
Ниже перечислены основные шаги и принципы создания ролловеров:
- Создайте три изображения, каждое из которых соответствует одному из следующих состояний ролловера:
- "coolBtn-normal.gif" - нормальное состояние ролловера,
- "coolBtn-over.gif" - состояние ролловера под курсором мыши,
- "coolBtn-down.gif" - состояние ролловера в момент нажатия кнопки мыши на нем.
- Проведите предзагрузку всех изображений ролловера.
- Обработайте следующие события:
- onmouseover - смена "coolBtn-normal.gif" на "coolBtn-over.gif",
- onmouseout - смена "coolBtn-over.gif" на "coolBtn-normal.gif",
- onmousedown - смена "coolBtn-over.gif" на "coolBtn-down.gif",
- onmouseup - смена "coolBtn-down.gif" на "coolBtn-over.gif".
<body>
<img src="../images/coolBtn-normal.gif" name="coolBtn"
onmouseover="changeImage(1);"
onmouseout="changeImage(0);"
onmousedown="changeImage(2);"
onmouseup="changeImage(1);" />
<script type="text/javascript">
var count = 0;
var path = new Array ("../images/coolBtn-normal.gif",
"../images/coolBtn-over.gif",
"../images/coolBtn-down.gif");
var img = new Array ();
for (var i=0; i<path.length; 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["coolBtn"].src = img[index].src;
}
</script>
<body>
