об'єкт Image
Характеристики об'єкта Image
Всі об'єкти класу Image можна розділити на вбудовані і породжені програмістом. Вбудовані об'єкти - це картинки контейнерів IMG. Якщо ці картинки перелічити, до них можна звертатися по імені. Наприклад, якщо у нас є картинка (будемо вважати, що вона перша в документі):
то значення властивості document.images [0] .name дорівнюватиме "picname", а до самої зображенні можна буде звертатися трьома способами:
Властивості src і lowSrc
Властивості src і lowSrc визначають URL зображення, яке монтується всередину документа. При цьому lowSrc визначає тимчасове зображення, зазвичай маленьке, яке відображається, поки завантажується основне зображення, чий URL вказується в атрибуті SRC контейнера IMG. Властивість src приймає значення атрибута SRC контейнера IMG. Програміст може змінювати значення і src. і lowSrc. У попередньому прикладі ми можемо змінити значення src наступним чином:
Як видно з цього прикладу, існує можливість модифікувати картинку за рахунок зміни значення властивості src вбудованого об'єкта Image. Якщо ви в перший раз переглядаєте дану сторінку (тобто картинки не закеширувалася браузером), то поступова зміна картинки буде помітно (звичайно, при низькій швидкості підключення до Internet; а також це залежить від браузера, який може завантажити картинку, а тільки потім вивести її цілком на сторінку). Як прискорити цю зміну, ми розглянемо в наступному розділі.
зміна картинки
Рішення полягає в розведенні по часу підкачки картинки і її відображення. Для початку ми створюємо зображення, до яких прив'язуємо обробники подій onMouseOver і onMouseOut. При наведенні покажчика миші на кожну з картинок вона замінюється іншою (кольоровий), а при відведенні мишки картинка замінюється назад на чорно-білу:
Однак, головне не в тому, що картинки заміщуються, а в тому, з якою швидкістю вони це роблять. Для досягнення потрібного результату на початку сторінки створюються масиви картинок, в які перед відображенням перекачується вся графіка. Для цієї мети використовують конструктор об'єкта Image:
Саме в той момент, коли властивості, наприклад, mono [25] .src прісвавается значення "images / mapb025.gif", і відбувається скачування цієї картинки з сайту на комп'ютер користувача. Якби замість об'єктів класу Image ми склали масив з рядків виду "images / mapb000.gif" і т.д. то ніякої подгрузки графіки не відбулося б, і кожен раз, коли користувач наводив би на чергове зображення, браузеру доводилося б завантажувати нову картинку. Ми помістили цей скрипт в контейнер
. тим самим гарантувавши, що до моменту, коли користувач почне працювати зі сторінкою, всі необхідні для роботи картинки вже будуть завантажені, і в процесі водіння мишки по картинках ніякої затримки показу чергового зображення спостерігатися не буде.Попутно звернімо увагу на наступний трюк, використаний в скрипті. Припустимо, нам необхідно написати 32 рядки: