Днес прочетох статията за 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, но надява се скоро това да не притеснява никой 
Loading ...
Loading ...
July 6th, 2010 at 10:50
Аз попаднах на ето този начин малко по-различен е, но ефекта е същия.
ХТМЛ:
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
July 6th, 2010 at 10:53
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
July 6th, 2010 at 21:50
Като гледам ти си написал/а почти същото, което е написал Chris Coyier в статията, коята посочих в началото на поста. Всъщност идеята ми е да може да се ползва без да указвам id за всяка картинка, и по-важното – картинката да не е сложена като фон на някой от елементите, защото както вече казах, ако имаш динамичен сайт, не е удачно понеже картинките ще идват от CMS-a.
February 17th, 2011 at 16:16
Може ли картинките да се въртят автоматично?
February 17th, 2011 at 16:34
Може
с js. Само че тук не е това основното
May 4th, 2011 at 14:02
At last! Someone who understands! Thanks for psotnig!