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



Partea a 10-a: Straturi II

In acest moment aveti deja bazele noii tehnici a straturilor. Aceasta lectie descrie urmatoarele tehnici:

Taierea (Clipping)

Puteti defini care parte rectangulara a stratului sa fie vizibila. Tot ce este in afara ariei definite nu va fi afisat. Aceasta tehnica este denumita 'clipping' (taiere - aici). Puteti utiliza proprietatile clip HTML in felul urmator: 

<ilayer left=0 top=0 clip="20,50,110,120">
<img src="davinci.jpg" width=209 height=264>
</ilayer>
(Am adaugat left=0 si top=0 deoarece versiunea mea Netscape (PR3 functionand pe WinNT) are unele probleme daca valorile lipsesc)
Desi imaginea este 209x264 pixeli puteti vedea numai o portiune redusa a ei:

Acesta parte are dimensiunile 90x70 (in pixeli). Primele doua valori specificate prin instructiunea clip (in tagul HTML <layer> sau <ilayer>) definesc coltul de stanga sus al ferestrei de taiere. Urmatoarea imagine ilustreaza aceasta:

Mult mai interesante lucruri se pot obtine prin setarea regiunii de taiere prin JavaScript. Pentu aceasta trebuie schimbate proprietatile clip.left, clip.top, clip.right si clip.bottom ale obiectului Strat (Layer). Dati o noua valoare uneia dintre aceste proprietati si regiunea de taiere se va modifica. Urmatorul exemplu schimba regiunea de taiere in mod dinamic. Utilizatorul are impresia ca imaginea este construita incetul cu incetul:

Iata si codul: 
<html>
<head>

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

var middleX, middleY, pos;


function start() {
  // get size of image
  var width= document.layers["imgLayer"].document.davinci.width;
  var height= document.layers["imgLayer"].document.davinci.height;

  // calculate pixel in the middle of image
  middleX= Math.round(width/2);
  middleY= Math.round(height/2);

  // starting position
  pos= 0;

  // start it!
  show();
}

function show() {

  // increase size of clipping area  
  pos+= 2; // step size
  document.layers["imgLayer"].clip.left= middleX- pos;
  document.layers["imgLayer"].clip.top= middleY- pos;
  document.layers["imgLayer"].clip.right= middleX+ pos;
  document.layers["imgLayer"].clip.bottom= middleY+ pos;

  // check if the whole image has been displayed
  if (!((pos > middleX) && (pos > middleY))) 
    setTimeout("show()", 20);  

}

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

<body>

<ilayer name="imgLayer" clip="0,0,0,0">
<img name=davinci src="davinci.jpg" width=209 height=264>
</ilayer>

<form>
<input type=button value="Start" onClick="start()">
</form>

</body>
</html>
Butonul din partea de <body>apeleaza functia start(). Mai intai avem de calculat la ce pozitie trebuie sa incepem - acesta este un pixel in mijlocul imaginii. Inmagazinam valorile x si y ale acestui pixel in variabilele middleX si middleY. Apoi functia show() este apelata. Aceasta functie fixeaza regiunea de taiere in functie de variabilele middleX, middleY si pos. Variabila pos este marita de fiecare data cand functia show() este apelata. Aceasta inseamna ca regiunea de taiere este din ce in ce mai mare de fiecare data. La sfarsitul show() fixam un timeout cu setTimeout() - vom intrerupe functia show(). Acest proces se opreste pe masura ce toata imaginea este afisata.
Va rog sa observati cum am obtinut aceeasi dimensiune a imaginii in functia start(): 
  var width= document.layers["imgLayer"].document.davinci.width;
  var height= document.layers["imgLayer"].document.davinci.height;
Prin intermediul document.layers["imgLayer"] accesam stratul numit imgLayer. Dar de ce nu folosim document dupa document.layers["imgLayer"]? Ei bine, fiecare strat contine propria sa pagina HTML - aceasta inseamna ca fiecare strat are un obiect document. Pentru a accesa o imagine de pe un strat imgLayer trebuie sa accesam un acest obiect document. Puteti observa in cod ca imaginea noastra este numita davinci. Restul cred ca este deja clar.

Straturi intretesute (Nested layers)

Am vazut deja ca un strat poate contine diferite obiecte. Ee pot contine chiar si alte straturi. Poate ca va intrebati la ce poate servi asa ceva. Exista cateva motive de a utiliza straturi intretesute. Voi aduce cateva exemple care demonstreaza modul de folosire a straturilor intretesute.
Primul exemplu foloseste un strat (numit parentLayer) ce contine alte doua straturi (layer1 si layer2).

This is the first layer This is the second layer

This is the parent layer.

Observati cele trei butoane. Aceste butoane vor porni si vor opri miscarea straturilor. Puteti vedea ca mutarea stratului parentLayer afecteaza si celelalte doua straturi. Dar mutarea stratului layer1 (sau layer2) afecteaza numai acest strat. Aceasta demonstreaza ca se pot defini grupuri de obiecte prin intermediul straturilor intretesute.

Haideti sa ne uitam la codul sursa: 

<html>
<head>

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

// starting position
var pos0= 0; 
var pos1= -10;
var pos2= -10;

// moving?
var move0= true;
var move1= false;
var move2= false;

// direction?
var dir0= false;
var dir1= false;
var dir2= true;

function startStop(which) {
  if (which == 0) move0= !move0;
  if (which == 1) move1= !move1;
  if (which == 2) move2= !move2;
}

function move() {

  if (move0) {
    // move parentLayer
    if (dir0) pos0--
      else pos0++;

    if (pos0 < -100) dir0= false;

    if (pos0 > 100) dir0= true;

    document.layers["parentLayer"].left= 100 + pos0;    
  }

  if (move1) {
    // move parentLayer
    if (dir1) pos1--
      else pos1++;

    if (pos1 < -20) dir1= false;

    if (pos1 > 20) dir1= true;

    document.layers["parentLayer"].layers["layer1"].top= 10 + pos1;
  }

  if (move2) {
    // move parentLayer
    if (dir2) pos2--
      else pos2++;

    if (pos2 < -20) dir2= false;

    if (pos2 > 20) dir2= true;

    document.layers["parentLayer"].layers["layer2"].top= 10 + pos2;    
  }

}

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

<body onLoad="setInterval('move()', 20)">

<ilayer name=parentLayer left=100 top=0>
  <layer name=layer1 z-index=10 left=0 top=-10>
    This is the first layer
  </layer>

  <layer name=layer2 z-index=20 left=200 top=-10>
    This is the second layer
  </layer>

  <br><br>
  This is the parent layer

</ilayer>

<form>
<input type="button" value="Move/Stop parentLayer" onClick="startStop(0);">
<input type="button" value="Move/Stop layer1" onClick="startStop(1);">
<input type="button" value="Move/Stop layer2" onClick="startStop(2);">
</form>

</body>
</html>
Ati vazut ca putem defini doua straturi in interiorul parentLayer. Acestea sunt straturile intertesute. Cum putem accesa aceste straturi din JavaScript. Veti vedea cum este realizat aceasta prin functia move(): 
    document.layers["parentLayer"].left= 100 + pos0;
      ...    
    document.layers["parentLayer"].layers["layer1"].top= 10 + pos1;
      ...
    document.layers["parentLayer"].layers["layer2"].top= 10 + pos2;
Pentru a accesa straturile intretesute nu puteti sa scrieti doar document.layers["layer1"] sau document.layers["layer2"] pentru ca straturile layer1 si layer2 sunt straturi inauntrul parentLayer.

Am vazut cum sa definim o regiune de taiere. Urmatorul exemplu foloseste o zona de taiere si o imagine ce se deplaseaza. Ceea ce dorim sa realizam este ca regiunea de taiere sa fie fixa - nu urmareste miscarea imaginii.
Apasati acest buton pentru a incarca exemplul:

Iata codul sursa: 

<html>
<head>

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

var pos= 0; // starting position
var direction= false;

function moveNclip() {

  if (pos<-180) direction= true;
  if (pos>40) direction= false;

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

  document.layers["clippingLayer"].layers["imgLayer"].top= 100 + pos;

}

// -->
</script>

</head>
<body onLoad="setInterval('moveNclip()', 20);">

<ilayer name="clippingLayer" z-index=0 clip="20,100,200,160" top=0 left=0>
  <ilayer name="imgLayer" top=0 left=0>
  <img name=davinci src="davinci.jpg" width=209 height=264>
  </ilayer>
</ilayer>

</body>
</html>
Din nou puteti vedea cum putem accesa stratul intretesut: 
  document.layers["clippingLayer"].layers["imgLayer"].top= 100 + pos;
Probabil ca sunteti deja familiari cu toate elementele scriptului.

Efecte speciale realizate cu straturi transparente

Efecte interesante pot fi realizate cu ajutorul straturilor partial transparente. In special imaginile cu parti transparente pot creeea un efect deosebit. Nu toate fomatele de imagine suporta parti transparente. In acest moment cel mai bun format este gif89a. Cele mai noi programe grafice suporta acest format. Sunt de asemenea cateva programe gratuite disponibile pe Internet.
Noul format grafic PNG suporta parti transparente. Cred ca vom vedea multe pagini utilizand acest format in viitorul apropiat (din momentul in care cele mai multe browsere il vor suporta). Acest format are o seama de avantaje in comparatie cu formatul GIF.

Iata si un efect:

Acest exemplu foloseste doua imagini (am adaugat un fundal in culori pentru a observa partile transparente):

Acest script nu difera foarte mult de celelalte exemple - deci nu voi scrie codul mai jos (desigur, dumneavostra il puteti vedea cu ajutorul comenzii 'View document source' din browserul dumneavoastra).

Multe din efectele remarcabile pe care le gasiti pe Internet se bazeaza pe straturi cu parti transparente. Puteti sa gasiti si alte exemple in pagina mea de exemple JavaScript (aceasta pagina face parte din siteul cartii mele de JavaScript la adresa http://www.dpunkt.de/javascript/) - aceasta pagina este oferita in engleza sau germana.

Sper ca acum ati inteles bazele folosirii straturilor cu ajutorul acestui tutorial. Astept sa vad efectele JavaScript produse de dumneavostra...

[previous] [index] [next]

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