Повертаючись до теми ролловеров. хочу показати найпростіший з його прикладів. Нагадаю, що ролловеров в верстці називається картинка, яка змінюється при наведенні на неї покажчика миші. Для роботи даного ефекту необхідно використовувати відоме властивість посилання під назвою hover. А як бути, якщо нам, наприклад, потрібно зробити лише саму картинку у вигляді посилання, але без будь-якого тексту. Наприклад, лого. Є гарний малюнок, і нам зовсім ні до чого на ньому зверху накладати текст посилання. А робити «порожню» заслання валідатор не дозволяє.
Для вирішення цього завдання можна застосувати властивість тексту, зване text-indent. яке зазвичай застосовується для «нового рядка». Але тільки задати йому від'ємне значення, причому досить велика. Тоді текст буде ховатися далеко за межею сторінки сайту. Таким способом надходять досить часто, особливо при використанні мальованих логотипів.
Але повернемося до наших баранів, себто ролловеров. Принцип роботи такий змінної картинки вельми простий: малюється подвійне зображення, одне строго під іншим:
Як видно з малюнка, висота загальної картинки повинна бути парному і складати суму висот обох зображень: 256 + 256 = 512px.
Далі в файлі стилів ми задаємо клас для майбутньої посилання, яка по-суті і буде виконувати роль ролловера. Тут є кілька хотростей. По-перше, клас задається не просто ім'ям з точкою попереду, а приписується безпосередньо до Тегу а:
По-друге, ми використовуємо картинку не безпосередньо (як через тег img), а виключно в якості фону. Але! Так як у нас картинка одна загальна, то нам потрібно спочатку якимось чином показувати її не всю, а лише верхню частину. Для цього зазначеному вище класу задамо наступний набір правил:
a.picture background: url (santa.gif) no-repeat 0 0;
width: 256px;
height: 256px;
display: block;
text-indent: -1000em;
>
Як бачите, в якості бекграунду ми прописали назву самої картинки, без повтору, але з координатами 0 0. Ось якраз ці самі координати і повідомляють браузеру, що показувати треба картинку, починаючи з її лівого верхнього кута. Але до яких пір? А ось як раз до 256px по ширині і стільки ж по висоті. І не більше того. Крім того, щоб все це справа вірно працювало, слід прописати правило відображення display: block;
Текст, як я вже говорив, нам потрібно заховати. Тому ми додали таке правило: text-indent: -1000em; Цього значення з лишком вистачить, навіть якщо у вас буде монітор з діагоналлю в 5 метрів.
Але це лише половина справи. Як же нам показати другу частину картинки? Для цього додамо наступний дуже короткий набір правил:
a.picture: hover background: url (santa.gif) no-repeat 0 -256px;
>
Вуаля! Все просто як 2х2. Використовуючи все ту ж картинку як фон, ми для властивості hover змінили лише координати даного малюнка. По ширині як був нуль, так він і залишився, а ось висоту ми задали з від'ємним значенням рівно на половину картинки. Тим самим ми як би сховали верхню його частину і показали нижню. От і все.
Живий приклад можна подивитися тут