Відмова від js як оптимізація js, частина 2
| Пошук по форуму |
| Розширений пошук |
| До сторінки. |
| subzey (блог) , 24 Гру 2009 - 02:07 |
|
Зміна картинки при наведенні
Припустимо, ми маємо графічне меню на сайті. Потрібно при наведенні змінити зображення на інше.
Це завдання для епохи вебдванолю вже не так актуальна, мода на прикраси в навігації поступово сходить нанівець, але все-таки, якщо дизайнер вирішив, що в головному меню кров-зносу потрібні опукло-увігнуті плашки з Matisse ITC, що ж робити в такому випадку?
Позбутися цього неподобства нам допоможуть так звані спрайти. Щоб зрозуміти, що це та чим саме допомогти, знову почнемо з основ css.
display - одна з найважливіших властивостей css, що змінює поведінку елемента. Не вдаючись (на цей раз) в нетрі, лише скажу, що задавши посилання на display: block , ми можемо змусити її поводитися не як малий елемент, а як блоковий:
Розглянемо інший приклад і попутно позбавимося хвороби деяких навігаційних меню (ну, наприклад, в phpmyadmin), коли задник вже помінявся, але при клацанні не відбувається нічого, просто тому що на посилання ще не навели.
Ну, а тепер, власне, перейдемо до озвученої проблеми. При наведенні посилання можна змінювати положення її фону з допомогою background-position: x y; .
Зробимо щось на кшталт ось такого зображення:
Все, що нам потрібно, це зробити це зображення тлом у всіх потрібних посилань і в кожній з них показати лише потрібний фрагмент. І вийде щось на кшталт цього:
Як бачите, ні грама яваскрипта і використання одного графічного файлу замість восьми (і відпала сама собою)необхідність до примусового кешування), і при цьому ще й сумісність з текстовими браузерами.
Альта-віста
Ну а якщо Вам потрібно міняти саме картинки, теж немає нічого неможливого. Просто засовуємо обидві в одне посилання, але показуємо лише одне. А при наведенні приховуємо і показуємо іншу.
Але тут є одне "але". В Опері, причому з давніх-давен, зображення не підвантажуються з сервера, якщо у них встановлено display: none . Логічно, чи ні, але доведеться вигадати інший спосіб приховувати зображення.
Для цього пригадаємо, що якщо елемент position встановлений в absolute , він не займає місця на сторінці. А ще те, що якщо елемент вирушає за ліву або верхню межу вікна, смуга прокручування не з'являється (крім деяких версій Firefox 1.x, який, на щастя, вже відмер).