Днес прочетох статията за 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, но надява се скоро това да не притеснява никой 😉
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
Може ли картинките да се въртят автоматично?
Аз попаднах на ето този начин малко по-различен е, но ефекта е същия.
ХТМЛ:
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