Смена картинок через hover

[TillL]

Здравствуйте, подскажите пожалуйста. Столкнулся с такой проблемой: нужно чтобы при наведении курсора картинка менялась на другую, т.е. по факту, она должна прокручиваться вниз (картинка: ширина 250, высота 500). Но самое главное на странице таких картинок нужно девять и все разные.

[hedgehog]

А как они должны прокручиваться по ховеру?

[TillL]

Т.е. сперва видим верхнюю часть, а при наведении - нижнюю. И независимо друг от друга.

Edited February 6, 2012 by TillL

[b0d]

С помощью background-position нельзя сделать?

[ablay2009]

#div{
     background-position:0 0;
}

#div:hover{
     background-position: 0 250px
}

Вот так

[TillL]

Всем спасибо за помощь! Разобрался. Просто к 4 утра мозги плавились и затупил.

Сделал так:

CSS:

.image1 { width: 250px; padding-top: 250px; background: url("../image1.jpg") no-repeat; }
		.image1:hover { background-position: 0 -250px; }

.image2 { width: 250px; padding-top: 250px; background: url("../image2.jpg") no-repeat; }
		.image2:hover { background-position: 0 -250px; }
...
и т.д.

HTML:

<a href="#"><div class="image1"></div></a>
<a href="#"><div class="image2"></div></a>
...
и т.д

(может кому пригодится)

Edited February 7, 2012 by TillL