Простой ролловер на CSS
Возвращаясь к теме ролловеров, хочу показать простейший из его примеров. Напомню, что ролловером в верстке называется картинка, которая меняется при наведении на нее указателя мыши. Для работы данного эффекта необходимо использовать известное свойство ссылки под названием hover.
А как быть, если нам, к примеру, нужно сделать лишь саму картинку в виде ссылки, но без всякого текста. Например, лого. Есть красивый рисунок, и нам вовсе ни к чему на нем сверху накладывать текст ссылки. А делать «пустую» ссылку валидатор не позволяет.
Для решения этой задачи можно применить свойство текста, называемое text-indent, которое обычно применяется для «красной строки». Но только задать ему отрицательное значение, причем достаточно большое. Тогда текст будет прятаться далеко за границей страницы сайта. Таким способом поступают довольно часто, особенно при использовании рисованных логотипов.
Но вернемся к нашим баранам, сиречь ролловеру. Принцип работы такой меняющейся картинки весьма прост: рисуется двойное изображение, одно строго под другим:
Как видно из рисунка, высота общей картинки должна быть четной и составлять сумму высот обоих изображений: 256+256=512px.
Далее в файле стилей мы задаем класс для будущей ссылки, которая по-сути и будет выполнять роль ролловера. Здесь есть несколько хотростей. Во-первых, класс задается не просто именем с точкой впереди, а приписывается непосредственно к тэгу а:
a.picture {…}
Во-вторых, мы используем картинку не напрямую (как через тэг 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 изменили лишь координаты данного рисунка. По ширине как был ноль, так он и остался, а вот высоту мы задали с отрицательным значением ровно на половину картинки. Тем самым мы как бы спрятали верхнюю его часть и показали нижнюю. Вот и все.
Живой пример можно посмотреть здесь
