CSS смяна на картинки

Днес прочетох статията за 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, но надява се скоро това да не притеснява никой 😉

юли 6th, 2010 at 10:50 am

Аз попаднах на ето този начин малко по-различен е, но ефекта е същия.
ХТМЛ:

Image one
Image two
Image three
Image four

CSS:

a { text-decoration: none; }

#wrapper { width: 400px; margin: 50px auto; position: relative; }

#wrapper a { width: 400px; height: 226px; display: block; position: absolute; top: 0; left: 0; }

#one { background: url(img/1.jpg) no-repeat; z-index: 1; }
#two { background: url(img/2.jpg) no-repeat; }
#three { background: url(img/3.jpg) no-repeat; }
#four { background: url(img/4.jpg) no-repeat; }

#wrapper a span { position: absolute; border: 1px solid gray; }

#one span { left: 0; bottom: -35px; }
#two span { left: 0; bottom: -75px; }
#three span { left: 150px; bottom: -35px; }
#four span { left: 150px; bottom: -75px; }

#wrapper a:hover { z-index: 2; }

+ reset Ha CSS-a

юли 6th, 2010 at 10:53 am

HTML:
div id=“wrapper“>

a id=“one“ href=“#“>Image one
a id=“two“ href=“#“>Image two
a id=“three“ href=“#“>Image three
a id=“four“ href=“#“>Image four

admin
юли 6th, 2010 at 9:50 pm

Като гледам ти си написал/а почти същото, което е написал Chris Coyier в статията, коята посочих в началото на поста. Всъщност идеята ми е да може да се ползва без да указвам id за всяка картинка, и по-важното – картинката да не е сложена като фон на някой от елементите, защото както вече казах, ако имаш динамичен сайт, не е удачно понеже картинките ще идват от CMS-a.
🙂

Teco
февруари 17th, 2011 at 4:16 pm

Може ли картинките да се въртят автоматично?

admin
февруари 17th, 2011 at 4:34 pm

Може 🙂 с js. Само че тук не е това основното

Оставете коментар

Design To HTML от Стайл нет