DHTML – Animacija layer-a

Krstarica 21. jul 2001. 00:00

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

Funkcija proverava vrstu browser-a i njegovu verziju, i preusmerava izvršenje prema odgovarajućem browser-u. Ako se radi o recimo Netscape-u 4, koristi se pristup preko „document.layer“ objekta i funkcija premesti(). A ako se radi o Internet Explorer-u 4 koriste se osobine (pixelLeft i pixelTop) stila za premeštanje sloja. U slučaju da se stranica učitava u neki drugi browser, pojaviće se poruka (metoda Alert) o tome da dati čitač ne podržava DHTML.

Pratite Krstaricu i preko mobilne aplikacije za Android i iPhone.

programiranje