Kao što već sigurno znate, kaskadni stilovi (Cascading Style Sheets) su komponenta onoga što zovemo dinamički HTML (DHTML), a služe za kontrolisanje stila i izgleda web stranica. Pored ove osnovne funkcije, kaskadni stilovi mogu biti iskorišćeni i za definisanje klasa stilova. Ove klase se, između ostalog, mogu iskoristiti za manipulisanje i pozicioniranje HTML elemenata (bilo gde na stranici). Na primer, kada mišem pređete iznad određenog paragrafa, možete podesiti da se premesti na drugu poziciju.
U sledećim redovima videćemo kombinaciju CSS i JavaScript koda, koja će animirati određeni sloj (layer), u kome može da se nalazi bilo koji HTML element. CSS kod za animiranje „sloja“ je vrlo jednostavan, ali prvo moramo definisati sam layer:
#sloj {position: relative; visibility: show; left: .02in; top: .02in;}
Nakon definisanja sloja, predstavićemo JavaScript funkciju za „animiranje“ (smestite ga unutar HEAD taga stranice):
<SCRIPT Language="JavaScript">
<!–
function premesti(levo,od_gore){
if (navigator.appVersion.substring(0,1) == "4"){
if (navigator.appName == "Netscape")
document.layers.sloj.premesti(levo,od_gore);
else {
sloj.style.pixelLeft = levo;
sloj.style.pixelTop = od_gore;
}
}
else
alert(‘Ovaj efekat zahteva DHTML Web browser.’)
}
//–>
</SCRIPT>
Da bi browser identifikovao pasus koji treba premestiti, koristi se ID parametar. Ovaj identifikator možemo dodeliti bilo kom pasusu na stranici:
<P ID=sloj>Pasus koji se premesta</P>
Ovim smo odredili koji „deo“ stranice će se animirati, a sada treba da odredimo na koji događaj će se izvršiti funkcija „premesti (levo,od_gore)“. Radi primera, na stranicu ćemo dodati jedan link, i na događaj „OnMouseOver“ pozvaćemo funkciju „premesti(levo,od_gore)“, sa prosleđenim parametrima:
<A HREF="#" onMouseOver="premesti(40,50)";>link za animaciju</A>
Ovim se na događaj „OnMouseOver“ poziva funkcija i prosleđuju joj se argumenti:
- levo = 40
- od_gore = 50
Pratite Krstaricu na www.krstarica.com