Меняющаяся картинка, rollover

Ролловер

Для того чтобы осуществлять смену картинки необходимо сделать картинку разделенную на две равные части, одна часть будет видимой, а вторая будет появляться только при наведении курсора на видимую часть картинки. Как таковой смены не будет, просто отображаться будут разные части одной картинки.

Для установки меняющейся картинки используем вот этот html-код:

<div id="foto">
<a class="foto" href="#">&nbsp;</a>
</div>

В CSS напишем:

#foto a.foto {
display:block;
width:606px;
height: 200px;
background: url("images/foto.jpg") 0 0 no-repeat;
}
#foto a.foto:hover {
background-position: -303px 0;
}

И получим вот такой результат:

Этот метод может пригодиться фотографам публикующим свои работы в Интернете. При установке превьюшек на страницы сайта можно напомнить посетителям сайта об авторских правах.