Popup Image cu CSS
1Cu ajutorul CSS-ului se pot realiza layout-uri impresionante, dar si scripturi. Voi prezenta in urmatorul articol un script de tip „Popup Image Viewer”. Pentru a intelege pe deplin sunt necesare cunostinte de CSS si HTML.
Dupa cum puteti vedea in imaginea alaturata, atunci cand cursorul se afla pe imagine, aceasta se mareste intr-o fereastra auxiliara, creand astefel efectul de Popup.
Incepem prin a insera in zona <head> urmatorul cod :
.thumbnail { position: relative; z-index: 0;}
.thumbnail:hover { background-color: transparent; z-index: 50; }
.thumbnail span { position: absolute; background-color: lightyellow; padding: 5px; left: -1000px; border: 1px dashed gray; visibility: hidden; color: black; text-decoration: none; }
.thumbnail span img { border-width: 0; padding: 2px; }
.thumbnail:hover span{ visibility: visible; top: 0; left: 60px;}
Am definit mai sus proprietatile casutei in care va aparea imaginea si dimensiunile acesteia. Â In continuare trebuie sa cream lista de imagini. In corpul paginii inseram :
Aici e codul care trebuie pus :
<a href="#thumb"> <img src="http://farm3.static.flickr.com/2322/2214532638_065893e065.jpg" width="100px" height="66px" border="0" /> <span> <img src="http://farm3.static.flickr.com/2322/2214532638_065893e065.jpg" /> <br/> Simply beautiful. </span> </a> <br/> <br/> <a href="#thumb"> <img src="http://farm4.static.flickr.com/3292/3131005845_96c65d68e2.jpg" width="100px" height="66px" border="0" /> <span> <img src="http://farm4.static.flickr.com/3292/3131005845_96c65d68e2.jpg" /> <br/> So clear ... </span> </a> <br/> <br/> <a href="#thumb"> <img src="http://farm3.static.flickr.com/2195/1810490865_bb35dbab45.jpg" width="100px" height="66px" border="0" /> <span> <img src="http://farm3.static.flickr.com/2195/1810490865_bb35dbab45.jpg" /> <br/> It's getting dark ... </span> </a>
Am definit o lista de imagini cu peisaje. In momentul in care cursorul se afla in zona imaginilor acestea fac Popup in fereastra auxiliara. Efectul este asemanator evenimentului OnMouseOver din JavaScript. 🙂 Sper ca articolul a fost folositor.
Nu este un script ci doar un event