Взято отсюда

Как обычно делают rollover ?

Делают две картинки, одну ставят на положеное ей место, а вторую показывают, когда мышка перекрывает первую. Два файла - две картинки. Можно делать классически, через javascript, можно стилями, однако всегда будет html и 2 картинки.

		<style>
		a#rover{
			width:100px;
			height:100px;
			background-image:url(leaf1.png);
			display:block;
			text-decoration:none;
		}
		a#rover:hover{
			background-image:url(leaf2.png);
		}
		</style>

		<a href="#" id="rover">&nbsp;</a>
	

С одной картинкой

... тоже можно сделать rollover. Преимущества:

1. одна картинка грузится быстрее, чем две (один запрос к серверу, а не два)
2. обычно меньше весит.
3. ничего не нужно подгружать: всё грузится сразу.
4. не забивается кеш браузера

В чём трюк ? В том, что мы показываем каждый раз только часть картинки. Сначала левую, потом правую.

		a#rover{
			width:100px;
			height:100px;
			background-image:url(leafs.png);
			display:block;
			text-decoration:none;
		}

		a#rover:hover{
			background-position: 100px 0;
		}
	

Теоретически, все ролловеры документа (и даже сайта ;)) можно сделать одной картинкой.