DHTML – Animacija layer-a

 –  aลพurirano:  –  

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 na www.krstarica.com