Ролловер средствами CSS

Ролловер – это элемент страницы, который меняет свой цвет либо размер при наведении на него курсора.
В данном случае рассмотрим ролловер сделанный средствами CSS из одной картинки с горизонтальным смещением.

Для начала нам понадобится картинка длиной 300 пикселей, поделенная на три равных области с разной цветовой заливкой, и высотой 100 пикселей.
Я использую вот такую:

В следующем шаге нам понадобится следующий код:

CSS-код:

#rollover a {
	display:block;
	width:100px; /* Ширина блока ролловера, соответствует ширине картинки разделенной на три */
	height: 100px;  /* Высота блока ролловера, соответствует высоте картинки */
	background: url("horizontal-css-rollover.gif") 0 0 no-repeat; /* Путь до картинки ролловера */
	color: #ff0000;
}
#rollover a:hover { 
	background-position: -100px 0; /* При наведении курсора на картинку, она смещается на один блок влево, в данном случае на 100 пикселей */
	color: #0000ff;
}
#rollover a:active {
	background-position: -200px 0;  /* При клике курсора по изображение, она смещается на два блока влево, в данном случае на 200 пикселей */
	color: #00ff00;
}

В коде есть комментарии, из которых, я надеюсь, ясно что к чему.

HTML-код:

<div id="rollover">
	<a href="#"></a>
</div>

Пример, того что получится, можно посмотреть здесь.

Работоспособность:
Internet Explorer 8
Firefox 3.5.4
Opera 9.64