Посмотреть ДЕМО Ролловеры (меню, вид которых меняется при наведении на них мышкой) обычно состоят из нескольких состояний. Основные состояния: при наведенной мышке, при нажатии, после нажатия. Для каждого состояния требуется отдельная картинка. В таком случае меню получается довольно тяжелое, так как для каждой кнопки приходится грузить несколько изображений.
Используя спрайты можно обойти эту проблему. Используется всего лишь одна картинка, и она не так сильно грузит сервер и потребляет трафик. Это очень полезно, если полностью пользоваться мощностью данной технологии.
Струтктура меню очень простая. Ее мы вставляем в тело документа:
Code
<div id="menu">
<a href="">Menu item 1</a>
<a href="">Item no. 2</a>
<a href="">Another (3)</a>
<a href="">Menu item 4</a>
<a href="">One more (5)</a>
</div>
Если бы мы не пользовались спрайтами, CSS код выглядел бы следующим образом:
Code
#menu a {
...
background: url("button.gif") top left no-repeat;
}
#menu a:hover {
...
background-image: url("button-over.gif");
}
#menu a:active {
...
background-image: url("button-active.gif");
}
/* etc... */
В коде выше используется отдельная картинка для каждого состояния в качестве фонового изображения.
Используя одну картинку, нам нет необходимости менять фоновое изображение. Мы только меняем расположение фона. Например, состояние :hover будет использовать фон сдвинутый на необходимое количество пикселей влево (в примере 157 пикселей); состояние :active - 314 пикселей.
И код CSS обретет вот такой вид:
Code
#menu a {
background: url("button.gif") 0 0 no-repeat;
...
}
#menu a:hover {
background-position: -157px 0;
...
}
#menu a:active {
background-position: -314px 0;
...
}
Вот и все. Смена состояний очень быстра и не забирает много трафика. Подобное меню кроссбраузерно (IE5+, Mozilla, Opera, Safari)
Исходники
