8. Об'єкт Image
Зображення на web-сторінці
Розглянемо об'єкт Image. З його допомогою можна вносити зміни у графічні образи, присутні на web-сторінці. Таким чином можна навіть створити анімацію.
У мові JavaScript усі зображення постають у вигляді масиву. Цей масив має назву images і є властивістю document. Кожне зображення на web-сторінці получает порядковий номер: перше зображення має номер 0, друге — номер 1 і т.д. Тому звертання до першого зображення таке: document.images[0].
Об'єкт Image має певні властивості, до яких можна звертатися мовою JavaScript. Наприклад, задати розміри, звернувшись до властивостей width i height. Наприклад, змінивши величину document.images[0].width, можна визначити ширину першого зображення на web-сторінці у пикселях.
На жаль, відстежувати індекс усіх зображнь важко при великій їхній кількості. Цю проблему вирішують наданням кожному зображенню своєї власної назви. Наприклад, при внесенні зображення тегом
<img src="img.gif" name="myImage" width=100 height=100> ,
до цього зображення можна звернутися, написавши document.myImage або document.images["myImage"].
Завантаження нових зображень
Для зміни зображень на web-сторінці нам знадобиться атрибут src. Як і у випадку тегу <img>, атрибут src містить адресу поданого зображення. У мові JavaScript є можливість призначити нову адресу зображення, вже завантаженому у web-сторінку. В результаті зображення буде завантажено з нової адреси. Нове зображення завжди отримує той самий размір, що був у попереднього. І Ви не можете змінити розмір поля, у якому це зображення розташовано.
Розглянемо код:
<img src="1.png" name="myImage" width=60 height=40>
<form><input type=button value="Змініть зображення" onClick="document.myImage.src='2.png'"></form>
Тут першим рядком завантажено зображення 1.png, якому надано назву myImage. Наступний рядок дозволить змінити попереднє зображення 1.png на нове — 2.png — після натискання клавіші «Змініть зображення».
Випереджальне завантаження зображення
Істотний недолік поданого коду полягає у тому, що лише після запису в src нової адреси починається завантаження нового зображення. Має пройти певний час, перш ніж нове зображення займе своє місце. Інколи це припустимо, але зазвичай такі затримки неприпустимі. У цьому випадку потрібно здійснити випереджальне завантаження зображення. Для цього створимо новий об'єкт Image. Розглянемо частину коду:
hiddenImg= new Image();
hiddenImg.src= "3.png";
Тут у першому рядку створено новий об'єкт Image. У другому рядку вказано адресу зображення, яке буде подано з допомогою hiddenImg. Запис адреси в атрибуті src призводить до завантаження зображення з вказаної адреси. Але після завантаження на екрані зображення не буде. Воно буде лише у пам'яті комп'ютера (у кеші). Для виклику зображення на екран потрібно здійснити таку вказівку:
document.myImage.src= hiddenImg.src;
Таким чином зображення негайно добувають з пам'яті комп'ютера й показують на екрані. Бажано, щоб до цього було завершено випереджальне завантаження. Лише у цьому випадку заміну зображення буде проведено без затримки.
Зміна зображння у зв'язку з подією, викликаною користувачем
Можна створювати гарні ефекти, використовуючи зміну зображень як реакцію на певні події. Наприклад, можна змінити зображення при потраплянні курсора миші на певну частину сторінки. Подивіться, як працює такий приклад, просто розташувавши курсор миші на зображенні.
Код цього прикладу такий:
<a href="#"
onMouseOver="document.myImage2.src='2.png'"
onMouseOut="document.myImage2.src='1.png'">
<img src="1.png" name="myImage2" width=60 height=40 border=0>
Розглянемо код, який допомагає розв'язати ці проблеми. Скрипт стане довшим, але написавши його один раз, Ви не будете у подальшому турбуватися про ці проблеми. Для гнучкості у використанні потрібно задовольнити такі дві умови:
Спочатку погляньте на роботу цього коду, розташовуючи курсор миші над зображеннями.
Розглянемо детально скрипт:
<html>
<head>
<script language="JavaScript"><!-- hide
var browserOK = false;
var pics; // -->
</script>
<script language="JavaScript1.1"><!-- hide
// Маємо JavaScript 1.1!
browserOK = true;
pics = new Array(); // -->
</script>
<script language="JavaScript"><!-- hide
var objCount = 0; // кількість зображень на web-сторінці
function preload(name, first, second)
// попереднє завантаження й розташування у масиві
{ if (browserOK)
{ pics[objCount] = new Array(3);
pics[objCount][0] = new Image();
pics[objCount][0].src = first;
pics[objCount][1] = new Image();
pics[objCount][1].src = second;
pics[objCount][2] = name;
objCount++;
}
}
function on(name)
{ if (browserOK)
{ for (i = 0; i < objCount; i++)
{ if (document.images[pics[i][2]] != null)
if (name != pics[i][2]) {document.images[pics[i][2]].src = pics[i][0].src;}
// вернути до початкового стану решту зображень
else {document.images[pics[i][2]].src = pics[i][1].src;}
//показати другу картинку при перетині курсором даного зображення
}
}
}
function off() // повернення до початкового стану усіх зображень
{ if (browserOK)
{ for (i = 0; i < objCount; i++)
{ if (document.images[pics[i][2]] != null)
document.images[pics[i][2]].src = pics[i][0].src;
}
}
}
// Випереджальне завантаження зображень. Потрібно вказати:
// попередньо завантажені зображенняя - другий і третій аргументи;
// об'єкт Image, до якого вони відносяться - перший аргумент.
// Саме цю частину потрібно корегувати для використання скрипту щодо
// інших зображень одночасно з редагуванням разділу body.
preload("link1", "f1.bmp", "f1m.bmp");
preload("link2", "f2.bmp", "f2m.bmp");
// --></script></head>
<body>
<a href="link1.htm" onMouseOver="on('link1')" onMouseOut="off()">
<img name="link1" src="f1.bmp" width="60" height="40" border="0"></a>
<a href="link2.htm" onMouseOver="on('link2')" onMouseOut="off()">
<img name="link2" src="f2.bmp" width="60" height="40" border="0"></a>
</body></html>
Поданий скрипт розташовує всі зображення у масив pics. Цей масив створено функцією preload(), яку викликано таким чином:
preload("link1", "f1.bmp", "f1m.bmp");