Простой ролловер

Дата: 06.01.2010 | Автор: Игорь Квентор | Рубрика: Верстка |

Тэги: , , , ,

Возвращаясь к теме ролловеров, хочу показать простейший из его примеров. Напомню, что ролловером в верстке называется картинка, которая меняется при наведении на нее указателя мыши. Для работы данного эффекта необходимо использовать известное свойство ссылки под названием hover. А как быть, если нам, к примеру, нужно сделать лишь саму картинку в виде ссылки, но без всякого текста. Например, лого. Есть красивый рисунок, и нам вовсе ни к чему на нем сверху накладывать текст ссылки. А делать “пустую” ссылку валидатор не позволяет.

Для решения этой задачи можно применить свойство текста, называемое text-indent, которое обычно применяется для “красной строки”. Но только задать ему отрицательное значение, причем достаточно большое. Тогда текст будет прятаться далеко за границей страницы сайта. Таким способом поступают довольно часто, особенно при использовании рисованных логотипов.

Но вернемся к нашим баранам, сиречь ролловеру. Принцип работы такой меняющейся картинки весьма прост: рисуется двойное изображение, одно строго под другим:

santabig.gif

Как видно из рисунка, высота общей картинки должна быть четной и составлять сумму высот обоих изображений: 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 изменили лишь координаты данного рисунка. По ширине как был ноль, так он и остался, а вот высоту мы задали с отрицательным значением ровно на половину картинки. Тем самым мы как бы спрятали верхнюю его часть и показали нижнюю. Вот и все.

Живой пример можно посмотреть здесь

rss Подпишитесь на RSS

Или получайте новости на ваш e-mail:

Комментарии (14) на запись “Простой ролловер”

  1. i247 06.01.2010 17:29

    Имхо, ролловер — это не ролловер, если он не убирается. И при повторно вызове, в вашем примере, всё уже в развёрнутом состоянии.

  2. Игорь Квентор 06.01.2010 20:18

    Не понял. Объяснитесь, пожалуйста. Что значит “в развернутом состоянии”? Мышь наводишь - картинка меняется, мышь отводишь - все встает на свои места. Что еще нужно?

  3. Eremkin 07.01.2010 02:27

    ха, прикольная штука) нужно будет попробывать )

  4. Евгений 07.01.2010 12:39

    Советую вместе с text-indent ставить overflow:hidden.
    это избавит от огромной обводки в firefox при клике на ссылку.

    p.s.
    либо outline:none, но считаю это плохим тоном)

  5. Игорь Квентор 07.01.2010 13:20

    Спасибо, Евгений! Очень полезное замечание.

  6. CSS Ninja 07.01.2010 16:52

    Евгений
    А почему outline:none - плохой тон? Без наездов, просто всегда использовал :)

    По теме - это выглядит еще прикольнее, если сюда добавить какой-нибудь jQuery fade in эффект.

  7. Евгений 07.01.2010 16:59

    CSS Ninja, а Вы попробуйте выбрать ссылку без мышки(на клавиатуре)…

  8. CSS Ninja 07.01.2010 19:00

    Евгений
    Не знаю, стоит ли овчинка выделки ) Много ли людей выделяют ссылки с помощью клавиатуры?..

  9. Евгений 07.01.2010 19:33

    CSS Ninja,

    второй пример:
    есть список ссылок, Вы кликаете на одну из них и переходите на другую страницу(в новом окне/вкладке) или открывается попап.
    Потом Вы возвращаетесь обратно и благодаря “обводке” видите куда кликали.

    Возможно кажется неубедительным, но попробуйте проделать это со списком у котором сотни пунктов…

  10. i247 07.01.2010 20:49

    Игорь, я про ту часть, что самих дедушек вызывает :)

  11. rotor 07.01.2010 20:52

    Санта в панике — это не вселяет оптимизма:)

    Можно слегка усложнить пример, добавив третье состояние и картинку для события по клику на ссылке (a:active). Будет интереснее.

  12. Евгений 07.01.2010 22:52

    Странно, но я считал что уже все используют этот метод смены картинки на ссылках. Хотя если люди вообще только начинают то тогда это актуально. Да и вообще на мой взгляд использование двух отдельных картинок сильно усложняет так как при загрузки второй картинке иногда происходят тормоза в ожидании погрузки.

    А вообще спасибо это очень полезно начинающим.
    Мир.

  13. Игорь Квентор 07.01.2010 22:52

    i247, в том смысле, что после срабатывания hover-а картинка застывает во втором положении? Но этого просто не может быть. Даже ИЕ6 работает с таким кодом адекватно. Может у вашего браузера какой-то хитрый кэш включен?

    rotor, верно! :) Можно сделать три состояния и даже четыре (a:visited)

Трэкбеки

Оставить комментарий