2007
CSS: Izrada gumba sa rollover efektom
??esto se za izbornike i sli??ne elemente koristi neki rollover efekt, odnosno situacija kada se nekom objektu prilikom prelaska mišem u nekom pogledu izmjeni oblik (promjena boje, izmjena slike, izmjena teksta i sl.).
Taj efekt mo??e se posti??i pomo??u javascripta, kojim se u ovom slu??aju ne??emo baviti, ili se mo??e posti??i pomo??u CSS-a, o ??emu se govori u ovom vodi??u.
CSS rollover efekt - proces izrade
Za rollover nije nu??no imati neki slikovni objekt, no ovaj primjer je temeljen na upravo takvom objektu.
Kao prvi korak napravite grafiku koju ??elite koristiti kao gumb.
Grafika gumba korištena u ovom primjeru:
Ova grafika sadr??i dvije grafike koje ??emo trebati unutar jedne.
Jedna koja ??e se prikazati kada se strelicom miša pre??e preko gumba (gornji dio), te jedna koja ??e se prikazivati kada se strelica miša makne sa tog gumba (donji dio). Tako??er mo??ete koristiti dvije zasebne grafike, no pristup sa jednom grafikom je bolji u nekim pogledima.
Kada bi koristili dvije zasebne grafike, prilikom u??itavanja bi se u??itala samo po??etna, dok bi se ona druga (rollover) po??ela u??itatavati tek nakon što se strelicom miša do??e na taj gumb te bi se tako rollover sgrafika prikazala nakon koje sekunde, pogotovo ako je korisnik na sporijoj vezi a rollover grafika te??a.
Kod javascripta se to mo??e riješiti sa recimo preload images funkcijom koja bi te grafike koje slu??e kao rollover u??itala prije svih ostalih, te nakon toga po??ela sa u??itavanjem ostalog sadr??aja stranice.
Kod na??ina koji radimo ovdje, u kojem su obje grafike u jednoj, dobiva se isti taj preload efekt druk??ijim putem. Kada se u??ita slika sa njom se naravno u??itaju i oba stanja pošto se sve nalazi na istoj grafici, a izmijenjivati ??e se tako da se prilikom prelaska strelicom miša, slika poravna sa gornjim rubom, umjesto po??etnog koji je poravnat sa donjim rubom. Tako ??e izgledati kao da je prikazana nova grafika. Pa krenimo sa teorije na praksu:
Za testiranje mo??ete preuzeti gornju grafiku ukoliko nemate svoju. Dimenzije su 44x88px što ??e nam trebati kasije.
Izrada CSS klase te DIV elementa
#gumb a {
display: block;
background: url(css-rollover.gif) bottom;
height: 44px;
width: 44px;
}
#gumb a:hover {
background: url(css-rollover.gif) no-repeat top;
}
<div id="gumb"><a href="#"></a></div>
#gumb a
Gumb ??e biti link stoga definiramo kao prvo izgled gumba kao linka (#gumb a).
display:block - mogu??e je kliknuti na ??itav blok elementa
background - slika gumba
height, width - visina, te širina elementa u kojem ??e se nalaziti gumb. Kao što je ve?? re??eno grafika gumba ima oba stanja na sebe, koja je u ovom slu??aju visine 88px. Stoga, ukoliko ??elimo da se prika??e samo po??etno stanje moramo postaviti dimenziju na onoliko koliko je jedna instanca gumba visoka. U ovom slu??aju na 44px pošto je visina jednog gumba te visine te poravnati sa donjim rubom (bottom). Onaj dio iznad 44px visine ne??e se vidjeti
#gumb a:hover
U ovom dijelu mijenjamo samo poziciju grafike sa bottom na top. U gornjem slu??aju bilo je poravnato kao bottom, odnosno sa donjim rubom. Kod prelaska strelicom miša, grafika ??e se poravnati sa gornjim rubom, te tako prikazati gornji dio grafike na kojem je drugi izgled gumba koji se koristi kao rollover. Donjih 44px ne??e se vidjeti.
??itav izvorni kod, mo??ete preuzeti iz izvornog koda stranice sa primjerom.
Ovim putem mo??ete jednostavno napraviti rollover efekt bez korištenja javascript jezika.
