Добавлено (16.01.2012, 14:47)
---------------------------------------------
А если разные изображения нужны, то лучше так:

<style type="text/css">
.pics {
overflow: hidden; /* Предотвращаем схлопывание блоков */
margin: 0 -10px 0 0; /* Компенсируем отсуп */
}
a.pic {

display: block; /* Преобразуем ссылку в блочный элемент */
width: 150px; /* Задаём ширину */
height: 150px; /* Задаём высоту */
margin: 0 10px 0 0; /* Задаём отсуп между картинками */
float: left; /* Ставим всё это дело в один ряд */
}
a.pic:hover {
background-position: top right; /* Для смены картинки при наведении показываем левую часть изображения */
}
/* Первая картинка */
a.pic1 {
background: url('http://i32.fastpic.ru/big/2012/0116/18/a686d22884aecff1b7d1b3d2b0768d18.jpg') no-repeat top left; /* Задаём фоновое изображение, запрещаем ему растягиваться и показываем левую часть изображения */
}
/* Вторая картинка */
a.pic2 {
background: url('http://i28.fastpic.ru/big/2012/0116/f7/631376d6f48656545088be3b27a5bcf7.jpg') no-repeat top left; /* Задаём фоновое изображение, запрещаем ему растягиваться и показываем левую часть изображения */
}
</style>
<div class="pics">
<a href="#" class="pic pic1"></a>
<a href="#" class="pic pic2"></a>
</div>