Спрайти, WebReference
Прийом, коли один малюнок змінюється на інший при наведенні на нього курсора миші, називається ефект перекочування або rollover. Зміну картинок можна зробити за допомогою скриптів або стилів, але потрібно пам'ятати про деякі моменти:
- кожний малюнок створює запит до сервера і, тим самим, незначно збільшує час завантаження сторінки;
- поява другої картинки відбувається із затримкою, тому що сам графічний файл ще не завантажився і на це потрібно невеликий час; подібне відбувається лише вперше, потім браузер кешує картинку та відображає її миттєво.
Щоб позбавитися цих недоліків всі зображення вставляють в одну загальну картинку, яка і називається спрайтом. Висновок самого зображення відбувається як фон через властивість background, а зміна картинки робиться рахунок зсуву фону за допомогою background-position. На рис. 1 показаний спрайт з кількома картинками.
Тут використовується два набори зображень — серця та чекбокси. Розташовувати свої картинки можна як горизонтально, так і вертикально, це не є важливим. Для кожного набору в коді створюємо свій власний клас і для нього вказуємо розміри елемента, що збігаються з розмірами картинки, в даному випадку це 64х64 пікселі. Потім додаємо спрайт у вигляді фону і за необхідності зрушуємо його через background-position (приклад 1).
Приклад 1. Зміна зображення при наведенні покажчика
Результат цього прикладу показано на рис. 2. Куди зрушувати фон - вліво або вгору, залежить від вихідного розташування картинок.
Мал. 2. Зміна картинки при наведенні на неї курсору миші
Складнощі цього методу починаються, коли в спрайт потрібно об'єднати більше чотирьох картинок, та ще й різного розміру.Зміна розміру, заміна існуючих картинок і додавання нових у спрайті призводить до повальної зміни та коду CSS. Так що краще скористатися особливими програмами на кшталт TexturePacker, вона сама поєднає всі малюнки в один і видасть готовий CSS. На жаль, ця програма є платною, але для ознайомлення доступна повнофункціональна пробна версія на 30 днів.