Umjesto da koristimo javascript za izradu popup-ova koji će prikazivati objašnjenje nekog teksta i sliku, korisitii ćemo samo css. Ova je tehnika vrlo jednostavna za upotrebu, ali i vrlo praktična unatoč svojoj jednostavnosti.
Pogledajte demo.
Počet ćemo pisanjem html koda za naš popup.
Ovo je <font class="tekst">link<span>http://tutoriali.biz</span></font> na moju <font class="text">stranicu<span><img src="csst.gif" alt="slika" /></span></font>.
Tekst koji za koji želimo da otvori popup prozor nakon što prijeđemo mišem sam stavio unutar taga font i dodijelio mu atribut class sa vrijednošću tekst. Dio koji želim da se prikaže nakon što mišem prijeđemo preko teksta sam stavio unutar taga span. Sve što sada trebam je napisati css kod koji će sakriti tag span dok se ne prijeđe mišem preko određenog teksta, a zatim odrediti poziciju popup prozora, koji je zapravo tag span.
.tekst span {
position: absolute;
left: -1000px;
visibility: hidden;
background: #ebe9bb;
padding: 2px;
border: 1px solid #f0f0f0;
color: #000;
}
.tekst:hover span {
visibility: visible;
z-index: 1;
left: 30px;
top: 40px;
}
.text span {
position: absolute;
left: -1000px;
visibility: hidden;
background: #ebe9bb;
padding: 2px;
border: 1px solid #f0f0f0;
color: #000;
}
.text:hover span {
visibility: visible;
z-index: 1;
left: 80px;
top: 40px;
}
S obzirom da se klase tekst i text razlikuju samo u imenu, objasnit ću vam samo svojstva napisana unutar klase tekst.
Svojstvom visibility određujemo hoće li element biti prikazan ili ne, u našem slučaju neće. Elementu određujemo poziciju tako što mu pridodajemo svojstvo position i vrijednost absolute, što znači da imamo potpunu kontrolu nad pozicijom elementa. Element pozicioniramo niskom negativnom vrijednošću kako bismo ga uklonili sa stranice jer će na inače ostati prazan prostor između teksta.
Nakon što smo sakrili i pozicionirali element, vrijeme je da odredimo kada će se on pojaviti. Css-om sam odredio kako će izgledati tag span nakon što se prijeđe mišem preko teksta. Dodijelio sam klasi svojstvo visibility, kako bi se sadržaja taga span prikazao, i odredio mu poziciju uz pomoć svojstava z-index, left i top.
više na pcchip.hr