Возвращаясь к теме ролловеров, хочу показать простейший из его примеров. Напомню, что ролловером в верстке называется картинка, которая меняется при наведении на нее указателя мыши. Для работы данного эффекта необходимо использовать известное свойство ссылки под названием 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 изменили лишь координаты данного рисунка. По ширине как был ноль, так он и остался, а вот высоту мы задали с отрицательным значением ровно на половину картинки. Тем самым мы как бы спрятали верхнюю его часть и показали нижнюю. Вот и все.
Живой пример можно посмотреть здесь
и славный техасский покер — много ли надо настоящему джентльмену?
Имхо, ролловер — это не ролловер, если он не убирается. И при повторно вызове, в вашем примере, всё уже в развёрнутом состоянии.
Ответить
Не понял. Объяснитесь, пожалуйста. Что значит “в развернутом состоянии”? Мышь наводишь - картинка меняется, мышь отводишь - все встает на свои места. Что еще нужно?
Ответить
ха, прикольная штука) нужно будет попробывать )
Ответить
Советую вместе с text-indent ставить overflow:hidden.
это избавит от огромной обводки в firefox при клике на ссылку.
p.s.
либо outline:none, но считаю это плохим тоном)
Ответить
Спасибо, Евгений! Очень полезное замечание.
Ответить
Евгений
А почему outline:none - плохой тон? Без наездов, просто всегда использовал :)
По теме - это выглядит еще прикольнее, если сюда добавить какой-нибудь jQuery fade in эффект.
Ответить
CSS Ninja, а Вы попробуйте выбрать ссылку без мышки(на клавиатуре)…
Ответить
Евгений
Не знаю, стоит ли овчинка выделки ) Много ли людей выделяют ссылки с помощью клавиатуры?..
Ответить
Ro 15.09.2011
@CSS Ninja, я, быват, ленюсь тянуться за мышью, то одобряю. И ещё видел у пары своих знакомых
Ответить
CSS Ninja,
второй пример:
есть список ссылок, Вы кликаете на одну из них и переходите на другую страницу(в новом окне/вкладке) или открывается попап.
Потом Вы возвращаетесь обратно и благодаря “обводке” видите куда кликали.
Возможно кажется неубедительным, но попробуйте проделать это со списком у котором сотни пунктов…
Ответить
Игорь, я про ту часть, что самих дедушек вызывает :)
Ответить
Санта в панике — это не вселяет оптимизма:)
Можно слегка усложнить пример, добавив третье состояние и картинку для события по клику на ссылке (a:active). Будет интереснее.
Ответить
Странно, но я считал что уже все используют этот метод смены картинки на ссылках. Хотя если люди вообще только начинают то тогда это актуально. Да и вообще на мой взгляд использование двух отдельных картинок сильно усложняет так как при загрузки второй картинке иногда происходят тормоза в ожидании погрузки.
А вообще спасибо это очень полезно начинающим.
Мир.
Ответить
i247, в том смысле, что после срабатывания hover-а картинка застывает во втором положении? Но этого просто не может быть. Даже ИЕ6 работает с таким кодом адекватно. Может у вашего браузера какой-то хитрый кэш включен?
rotor, верно! :) Можно сделать три состояния и даже четыре (a:visited)
Ответить
Я вообще футболист, но вот решил научиться чему-то иному… Можно мне, как “танкисту” объяснить что такое: “следует прописать правило отображения display:block;” и как это сделать…
Если можно на e-mail! Буду очень благодарен. С меня статья на ЖЖ с ссылкой на вас. Спасибо!
Ответить
2 Coach: данное правило уже прописано в наборе правил для ссылок с классом .picture. См. пример кода выше.
Ответить