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 jednostavno postići pomoću CSS-a.

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 u jednoj.
Jedna koja će se prikazati kada se strelicom miša prođ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 grafika 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 {
   display: block;
   background: url(css-rollover.gif) bottom;
   height: 44px;
   width: 44px;
}

.gumb:hover {
   background: url(css-rollover.gif) no-repeat top;
}

<a class="gumb" href="#"></a>

.gumb
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: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 kod, možete preuzeti iz izvornog koda stranice sa primjerom.

Ovim putem možete jednostavno napraviti rollover efekt bez potrebe za javascriptom.