Днес прочетох статията за CSS Image Switcher на Chris Coyier. Примерът е страхотен, но поводът да напиша пример подобен на неговия е, че в практиката много често такава смяна на картинки се прави динамично.

В неговия урок, картинките се слагат като фон, което би попречило да се сменят от система за управление на съдържанието например (или ще се ползва js, което тук не е целта).

Ето го и работещото примерче.

Като за начало това е html -a

<div id="image_container">
 <a href="javascript:;">
 <img src="images/1.jpg" alt="" />
 <span>1</span>
 </a>
 <a href="javascript:;">
 <img src="images/2.jpg" alt="" />
 <span>2</span>
 </a>
 <a href="javascript:;">
 <img src="images/3.jpg" alt="" />
 <span>3</span>
 </a>
</div>

Както се вижда тук създаваме контейнер за елементите. Няколко a – елемента, които да обгръщат картинките и линковете сменящи картинките.

А ето го и css-a

#image_container{
 position: relative;
 overflow: hidden;

}
#image_container img{
 position: absolute;
 top: 10px;
 left: 0;
 display: block;
 width: 300px;
 height: 188px;
}
#image_container span{
 float: left;
 padding: 200px 0 0 10px;
}

#image_container a:hover span {
 text-decoration: underline;
 cursor: pointer;
}
#image_container a:hover img{
 z-index: 10;
 overflow: hidden; /* ie7 fix*/
}

Картинките са позиционирани абсолютно за да могат да застанат една върху друга, а span елементите са с float: left, за да могат да се подредят един до друг.

При hover на линка, картинката приема  по-голям z-index, за да се покаже над останалите.

Ако имате предложения за подобряване на ефекта – пишете, ще се радвам да ги видя.

Забележка: И двата примера не работят под IE6, но надява се скоро това да не притеснява никой 😉