VOODOO'S INTRODUCTION TO JAVASCRIPT
© 1996, 1997 by Stefan Koch © 1998 Romanian translation by Calin Nicolae



Partea a 9-a: Straturi I

Ce sunt straturile (layers)?

Straturile (sau nivele) - in original LAYERS, termen ce va fi folosit ca atare in acesta traducere - sunt una dintre noile facilitati ale Netscape Navigator 4.0. Ele permit pozitionarea absoluta a obiectelor si deci si a imaginilor. In afara de aceasta puteti misca obiectele in pagina HTML. Puteti de asemenea sa mutati obiecte.
Straturile pot fi mai usor manipulate cu ajutorlu JavaScript. Sper ca sunteti la fel de entuziast de tehnica straturilor (layers) ca si mine.

In momentul de fata puteti utiliza straturi numai in Netscape Navigator 4.0 !

Ca de obicei nu voi descrie detaliile fiecarul tag. Exista un document foarte buna care descrie toate elementele straturilor din Netscape Navigator 4.0 la adresa http://home.netscape.com/comprod/products/communicator/index.html - deci nu mai este necesar sa repet acest document.

Ce sunt de fapt straturile (layers)? Ele pot fi explicate cu destula usurinta: luati cateva foi de hartie. Pe una din foi scrieti un text. Pe alta desenati o imagine. Scrieti un text langa imagine pe o a treia pagina si asa mai departe. Acum, puneti toate cele trei foi de hartie pe masa. Inchipuiti-va ca fiecare foaie de hartie este un strat. Din acest punt de vederere un strat poate fi vazut ca un container. El contine obiecte - in acest caz text si imagini.
Luati acum o foaie de hartie cu o imagine desenata. Miscati-o pe suprafata mesei. Miscarea imaginii respecta miscarea foii de hartie pe care este desenata. Ce concluzie tragem? Straturile pot contine diverse obiecte - imagini, formulare, text etc. - ce pot fi inserate in pagina HTML si mutate in cadrul ei. Daca se muta un strat toate obiectele de pe acel strat se muta.
Straturile se pot suprapune la fel ca si foile de hartie dde pe masa. Fiecare strat poate avea o parte transparenta. Decupati o parte dintr-o foaie. Apoi suprapuneti foaia respectiva peste o alta foaie. Partea decupata este o 'parte transparenta' a primei foi - continutul foii de dedesupt este acum vizibil.

Creearea straturilor

Pentru creearea unui strat trebuie folosit fie tagul <layer> fie tagul <ilayer> . Puteti folosi urmatoarele proprietati:

name="layerName" Numele stratului (layer)
left=xPosition Pozitia orizontala fata de coltul stanga sus
top=yPosition Pozitia verticala fata de coltul stanga sus
z-index=layerIndex Numarul index al stratului
width=layerWidth Latimea stratului in pixeli
clip="x1_offset, y1_offset, x2_offset, y2_offset" Defineste aria pe care stratul va fi afisat
above="layerName" Defineste deasupra carui strat va aparea acest strat
below="layerName" Defineste sub care strat va aparea acest strat
Visibility=show|hide|inherit Vizibilitatea stratului
bgcolor="rgbColor" Culoarea fundalului - fie numele unei culori standard fie valoarea RGB
background="imageURL" Imaginea de fundal (background image)

Tagul <layer> este utilizat pentru straturile care pot fi pozitionate in mod clar. Daca nu specificati o pozitie (cu ajutorul proprietatilor left si top) stratul va fi pozitionat in coltul stanga sus al ferestrei.
Tagul <ilayer> creeaza un strat al carei pozitie depinde de modul de afisare al documentului.

Haideti sa incepe cu un exemplu simplu. Dorim sa creem doua straturi. In primul strat creem a imagine iar in cel de-al doilea un text. Ceea ce dorim sa facem este sa afisam textul deasupra imaginii.


Textul este afisat deasupra imaginii
Iata codul sursa: 
<html>

<layer name=pic z-index=0 left=200 top=100>
<img src="img.gif" width=160 height=120>
</layer>

<layer name=txt z-index=1 left=200 top=100>
<font size=+4> <i> Layers-Demo </i> </font>
</layer>

</html>
Puteti observa ca definim 2 straturi cu ajutorul tagului <layer>. Ambele straturi sunt pozitionate la 200/100 (definite prin left si top). Totul intre tagurile <layer> si </layer> (sau intre <ilayer> si </ilayer>) apartine acestui strat.
Puteti vedea ca folosim proprietatea z-index. Aceasta proprietate defineste modul in care straturile apar - in cazul nostru spun browserului daca textul apare deasupra si dedesuptul imaginii. Stratul cu cel mai mare index z va fi afisat deasupra. Nu trebuie sa folositi 0 sau 1 pentru indexul z - orice numar pozitiv intreg este in regula.
Daca scrieti z-index=100 in primul tag <layer> textul va fi afisat dedesuptul imaginii - pe masura ce stratul-text va avea un index z mai mic. Puteti observa textul prin imagine pentru ca am folosit un fundal transparent ( formatul gif89a ).


Acest text este afisat sub imagine

Straturile si JavaScript

Acum vom accesa straturile prin intermediul JavaScript. Dorim sa incepem cu un exemplu unde utilizatorul trebuie sa apese un buton pentru a ascunde sau a face vizibil un strat.
Mai intai trebuie sa stim cum vor fi straturile reprezentate in JavaScript. De obicei exista cateva cai. Cel mai bine este sa dam un nume fiecarui strat. Daca definim un strat cu 

<layer ... name=myLayer>
...
</layer>
putem sa-l accesam prin document.layers["myLayer"]. Conform documentatiei oferite de Netscape putem de asemenea scrie document.myLayer - dar aceasta face ca browserul meu sa dea eroare. Aceasta problema apare in mod sigur numai in versiunea beta si nu va fi o problema a versiunii finale. document.layers["myLayer"] nu mi-a creeat probleme asa ca voi folosi aceasta alternativa.
Puteti accesa straturile prin intermediul unui index numar intreg. Pentru a accesa stratul cel mai de jos puteti scrie document.layers[0]. Puteti observa ca indexul nu este acelasi lucru cu proprietatea z. Daca aveti, spre exemplu, doua straturi numite layer1 si layer2 cu numerele z 17 si 100 puteti accesa aceste straturi prin document.layers[0] si document.layers[1] si nu prin document.layers[17] si document.layers[100].

Exista cateva proprietati ale unui strat care pot fi scimbate prin inermedil JavaScript. Urmatorul exemplu prezinta un buton care permite ascuderea sau prezentarea unui strat. (Netscape Navigator 4.0 - sau mai bun - necesar!).

Acest text este in interiorul unui strat

Codul sursa arata astfel: 

<html>
<head>
<script language="JavaScript">
<!-- hide

function showHide() {
  if (document.layers["myLayer"].visibility == "show")
    document.layers["myLayer"].visibility= "hide"
  else document.layers["myLayer"].visibility= "show";
}

// -->
</script>
</head>
<body>

<ilayer name=myLayer visibility=show>
<font size=+1 color="#0000ff"><i>This text is inside a layer</i></font>
</ilayer>

<form>
<input type="button" value="Show/Hide layer" onClick="showHide()">
</form>

</body>
</html>
Butonul apeleaza functia showHide(). Puteti observa ca functia acceseaza proprietatea property visibility a stratului obiect MyLayer. Prin definirea "show" sau "hide" a document.layers["myLayer"].visibility puteti sa afisati sau sa ascundeti stratul. Va rog sa observati ca "show" si "hide" sunt siruri - si nu cuvinte rezervate, deci nu puteti scrie document.layers["myLayer"].visibility= show.
Am utilizat tagul <ilayer> in locul tagului <layer> pentru ca am dorit sa punem un strat in cadrul documentului.

Deplasarea straturilor

Proprietatile left si top definesc pozitia stratului. Puteti desemna noi valori acestor proprietati pentru a seta pozitia stratului. Linia urmatoare stabileste pozitia orizontala a stratului la 200 (in pixeli): 

document.layers["myLayer2"].left= 200;
Acum sunteti gata sa programati un strat ce se deplaseaza - cel de mai jos arata ca a lista derulanta intr-o fereastra de browser.

Acest text este in interiorul unui strat

Scriptul arata in felul urmator: 

<html>
<head>
<script language="JavaScript">
<!-- hide

function move() {
  if (pos < 0) direction= true;
  if (pos > 200) direction= false;

  if (direction) pos++
    else pos--;

  document.layers["myLayer2"].left= pos;
}

// -->
</script>
</head>
<body onLoad="setInterval('move()', 20)">

<ilayer name=myLayer2 left=0>
<font size=+1 color="#0000ff"><i>Acest text este in interiorul unui strat </i></font>
</ilayer>

</body>
</html>
Creem un strat numit myLayer2. Puteti observa ca folosim onLoad inauntrul tagului <body>. Trebuie sa incepem sa derulam stratul din momentul in care pagina a fost incarcata. Folosim setInterval() inauntrul onLoad event-handler. Aceasta este o noua metoda a JavaScript 1.2 (versiunea JavaScript din Netscape Navigator 4.0). Aceasta poate fi folosita pentru apelarea functiei de mai multe ori intr-un anumit interval de timp. Am folosit setTimeout() pentru acest lucru in ultimele lectii. setInterval() funtioneaza aproape la fel - dar trebuie apelata numai o data.
Prin setInterval() apelam functia move() la fiecare 20 milisecunde. Functia move() stabileste stratul intr-o anumita pozitie. Pe masura ce apelam functia in mod repetat vom avea efectul de deplasare al textului. Tot ce avem de facut in functia move() este sa calculam pozitia stratului si sa ii dam aceasta valoare lui document.layers["myLayer2"].left= pos.

Daca veti examina codul sursa a acestei parti a tutorialului va veti da seama ca bucata mea de cod este un pic diferita. Am implementat o secventa de cod pentru ca posesorii browsere cu versiuni mai vechi ale JavaScript sa nu primeasca mesaje de eroare. Cum poate fi realizat aceasta? Urmatorul cod va fi executat numai de browserele care inteleg JavaScript 1.2: 

<script language="JavaScript1.2">
<!-- hide
document.write("You are using a JavaScript 1.2 capable browser.");
// -->
</script>
Aici apare acceasi problema pe care am avut-o cu obiectul Image. Putem rescrie codul in mod similar. Setarea variabilei browserOK rezolva problema.

Urmatorul exemplu demonstreaza modul in care straturile se suprapun:

Acest text este in interiorul unui strat

[previous] [index] [next]

©1996,1997 by Stefan Koch
e-mail:skoch@rumms.uni-mannheim.de
http://rummelplatz.uni-mannheim.de/~skoch/
My JavaScript-book