Ролловер на 4 состояния из одной горизонтальной картинки

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

Тэги: , , ,

Обычно картинки для ролловера располагают вертикально, как в примере “Простой ролловер”. Но то же самое можно сделать и при размещении картинок горизонтально. В чем особенный смысл? Да ни в чем. Просто может быть кому-то так покажется более прикольным. Или понятным.

Для пущего форсу сегодняшний ролловер сделаем заточенным аж на четыре состояния: не-при-делах, в-чем-дело, вперед-вперед и отвалите-я-устал. То есть, состояние покоя, состояние готовности при наведении курсора мыши, непосредственно срабатывание и возврат в исходное состояние. В правилах CSS для ссылок за все эти четыре состояния отвечают соответствующие псевдо-классы :link, :hover, :active и :visited

Для начала подготовим одну большую картинку, на которой последовательно разместим три плашки:

rollover-gor2.gif

Как видите, все достаточно просто и прозаично: каждая из трех плашек составляет в длину ровно 180 пикселей. Высота картинки — 50 пикселей. Запишем, а затем разберем правила в листе стилей CSS:

a:link, a:visited {
background: url(rollover-gor.gif) no-repeat 0 0;
width: 180px;
height: 50px;
color: #fff;
display: block;
font: bold 24px Arial;
text-decoration: none;
padding: 8px 0 0;
}
a:hover {
background-position: -180px 0;
color: #333;
text-decoration: none;
}
a:active {
background-position: -360px 0;
color: #ff0;
text-decoration: none;
}

Для начала мы прописали общим фоном всю картинку, но при этом задали координаты 0 0 и ограничили размер видимого пространства прямоугольником 180х50 пикселей. Это как раз размер одной плашки. Чтобы при манипуляциях с мышкой срабатывала вся поверхность кнопки, а не только текст ссылки, необходимо добавить в набор правило display: block;

Обратите внимание: первый набор правил прописан одновременно для двух псевдо-классов :link и :visited. То есть, после всех срабатываний кнопка будет возвращаться в исходное состояние. Можно отдельно для посещенной ссылки (:visited) прописать свои правила. Это уже на ваш вкус.

Другие правила из первого набора, думаю, не вызовут сложностей.

Рассмотрим два последующих. Для псевдо-класса :hover мы заменили правило для отображения фона — background на более конкретное — background-position. Фон у нас уже задан, и нам остается лишь сменить координаты видимой части картинки. Для этого мы как-бы “сдвигаем” окно видимой части на -180 пикселей влево. В результате станет видна вторая плашка.

Точно также поступаем и для псевдо-класса :active. Только теперь сдвигаем фон уже на все -360 пикселей (180+180=360).

Все просто. Пример такого ролловера можно посмотреть здесь

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

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

Комментарии (4) на запись “Ролловер на 4 состояния из одной горизонтальной картинки”

  1. Guedda 03.02.2010 14:04

    Спасибо, интересное решение.
    У меня только одно предложение (по всем статьям в целом) - а не могли бы Вы использовать в ссылках, которые есть в Ваших статьях атрибут target с параметром “_blank” - а то легче, когда в двух вкладках и пример и статья. Быстрее, так сказать, навигация.

  2. Игорь Квентор 04.02.2010 13:23

    Окей! Договорились :)

  3. Настя 05.02.2010 17:34

    Здравствуйте, Игорь).Огромное спасибо Вам за Ваши уроки и прочие полезности.Очень пригодилось! Не по теме вопрос, но , возможно, Вы отреагируете)).Сколько времени Вам понадобилось, для достижения такого уровня? У Вас есть секрет, как бысто “научиться” учится?)).. с уважением…

  4. Eremkin 05.02.2010 18:52

    guedda, а правой кнокой мыши щелкнуть и выбрать “открыть в новой вкладке” не получается? :)))

Трэкбеки

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