Ролловер на 4 состояния из одной горизонтальной картинки
Обычно картинки для ролловера располагают вертикально, как в примере «Простой ролловер». Но то же самое можно сделать и при размещении картинок горизонтально. В чем особенный смысл? Да ни в чем. Просто может быть кому-то так покажется более прикольным. Или понятным.
Для пущего форсу сегодняшний ролловер сделаем заточенным аж на четыре состояния: не-при-делах, в-чем-дело, вперед-вперед и отвалите-я-устал.
То есть, состояние покоя, состояние готовности при наведении курсора мыши, непосредственно срабатывание и возврат в исходное состояние. В правилах CSS для ссылок за все эти четыре состояния отвечают соответствующие псевдо-классы :link, :hover, :active и :visited
Для начала подготовим одну большую картинку, на которой последовательно разместим три плашки:
Как видите, все достаточно просто и прозаично: каждая из трех плашек составляет в длину ровно 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).
Все просто. Пример такого ролловера можно посмотреть здесь
