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



Partea a 8-a: Obiectul Image

Imagini in pagina web

Pentru inceput sa examinam obiectul Image ce a aparut odata cu JavaScript 1.1 (deci cu Netscape Navigator 3.0). Cu ajutorul obiectului Image puteti schimba imaginile din pagina web. Astfel avem posibilitatea sa creem animatii in paginile web.

Va rog sa observati ca browserele mai vechi (Netscape Navigator 2.0 si Microsoft Internet Explorer 3.0 - folosesc JavaScript 1.0) nu pot sa ruleze scripturile din acest capitol - sau nu puteti vedea efectul respectiv.

Haideti sa vedem cum pot fi adresate imaginile cu ajutorul JavaScript. Toate imaginile sunt reprezentate printr-o matrice. Aceasta matrice este numita images. Este o proprietate a obiectului document. Fiecare imagine de pe o pagina web are un anumit numar. Prima imagine are numarul 0, cea de-a doua imagine are numarul 1 si asa mai departe. Adresam deci prima imagine cu document.images[0].

Fiecare imagine intr-un document HTML este considarata un obiect Image. Un obiect Image are o serie de proprietati care pot fi accesate prin JavaScript. De exemplu puteti vedea ce dimensiuni are o imagine folosind proprietatile width si height. document.images[0].width furnizeaza latimea (in pixeli) a primei imagini din pagina web.

In special daca aveti mai multe imagini pe o singura pagina devine din ce in ce mai greu sa le aveti pe toate sub observatie. Atribuirea de nume fiecarei imagini rezolva aceasta problema. Daca declarati o imagine prin tagul:

<img src="img.gif" name="myImage" width=100 height=100>

puteti adresa prin document.myImage or document.images["myImage"].

Incarcarea imaginii noi

Desi este eficient sa stim care sunt dimensiunile unei imagini pe o pagina web nu este chiar ceea ce ne trebuie neaparat. Dorim sa putem schimba imaginile pe pagina. Pentru aceasta folosim proprietatea src. La fel ca in tagul <img> proprietatea src reprezinta adresa imaginii afisate. Cu JavaScript 1.1 puteti da o noua adresa unei imagini deja incarcata. Rezultatul este ca imaginea de la noua adresa este incarcata. Aceasta noua imagine inlocuieste vechea imagine de pe pagina web. Iata si un exemplu:

<img src="img1.gif" name="myImage" width=100 height=100>

Imaginea img1.gif este incarcata si ia numele myImage. Urmatoarea linie de cod inlocuieste fosta imagine img1.gif cu o noua imagine img2.gif:

document.myImage.src= "img2.src";

Noua imagine are intotdeauna aceleasi dimensiuni ca si vechea imagine. Nu puteti schimba suprafata de afisare a imaginii. Puteti testa acest exemplu apasand acest buton (codul functioneaza numai o singura data).

Preincarcarea imaginilor:

Unul dintre neajunsuri este ca noua imagine este incarcata dupa dupa ce a fost desemnata o noua adresa proprietatii src. Daca imaginea nu a fost deja incarcata este necesara o perioada de timp pentru incarcarea din Internet. In unele cazuri acest fenomen nu creeaza probleme - dar exista si situatii in care astfel de intarzieri sunt inacceptabile. Deci ce putem face? Solutia este preincarcarea imaginilor. Pentru aceasta creeam un nou obiect Image. Haideti sa vedem si codul:

hiddenImg= new Image();
hiddenImg.src= "img3.gif";
Prima linie creeaza un nou obiect Image. A doua linie defineste adresa imaginii care va fi reprezentata prin obiectul hiddenImg. Am vazut deja ca desemnarea unei noi adrese in atributul src forteaza browserul sa incarce imaginea de la adresa de la care i-a fost indicat. Deci imagine img2.gif este incarcata cand cea de-a doua linie de cod este executata. Asa cum sugereaza numele hiddenImg presupune ca imaginea nu mai este afisata dupa ce browserul a terminat incarcarea. Ea este pastrata in memorie (sau mai bine in cache) pentru utilizare ulterioara. Pentru a afisa aceasta imagine putem sa folosim urmatoarea linie de cod:

document.myImage.src= hiddenImg.src;

Acum imaginea este preluata din memoria cache si afisata imediat. Deja noi avem incarcata imaginea.
Bineinteles ca browserul trebuie sa fi terminat incarcarea fisierului (fara ca utilizatorul sa supravegheze procesul) pentru a putea sa afiseze imaginea dara intarzieri. Daca aveti un numar mare de imagini pe care le preincarcati este posibil sa aveti intarzieri in afisare. Trebuie sa aveti intotdeauna in vedere viteza conexiunii, preincarcarea imaginilor nu face ca imaginile sa fie incarcate mai repede, ci doar sa fie incarcate inainte de a fi afisate.
Daca aveti o conexiune la Internet rapida proabil va intrebati despre ce este toata discutia. Trebuie sa va aduceti aminte ca sunt si utilizatori cu modemuri de 14.400.

Schimbarea imaginii ca urmare a unor actiuni initiate de utilizator

Puteti creea efecte deosebite prin scimbarea imaginilor ca urmare a unor evenimente. Puteti de exemplu schimba imaginile la trecerea mouseului deasupra unei zone. Testati acest exemplu prin mutarea mouselui deasupra imaginii (veti obtine un mesaj de eroare intr-un browser care utilizeaza JavaScript 1.0 - vom vedea si cum sa evitam aceasta eroare):


Codul sursa al acestui exemplu arata astfel: 

<a href="#" 
  onMouseOver="document.myImage2.src='img2.gif'" 
  onMouseOut="document.myImage2.src='img1.gif'">
<img src="img1.gif" name="myImage2" width=160 height=50 border=0></a>
Aceasta secventa de cod cauzeaza unele probleme atunci cand: Vom vedea acum un script complet care rezolva aceste probleme. Scriptul devine mai lung - dar odata ce il aveti nu trebuie sa va mai bateti capul.
Sunt doua puncte care trebuie avute in vedere pentru a avea un script flexibil:
Aici puteti vedea si cum functioneaza codul:


Acesta este codul sursa (exista si cateva comentarii):


<html>
<head>

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


// ******************************************************
// Script from Stefan Koch - Voodoo's Intro to JavaScript
//     http://rummelplatz.uni-mannheim.de/~skoch/js/ 
//       JS-book: http://www.dpunkt.de/javascript
//    You can use this code if you leave this message
// ******************************************************

  // ok, avem un browser JavaScript 
  var browserOK = false;
  var pics;

// -->
</script>

<script language="JavaScript1.1">
<!-- hide

  // JavaScript 1.1 browser - oh yes!
  browserOK = true;
  pics = new Array();

// -->
</script>



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

var objCount = 0; // numarul imaginilor care se modifica in pagina web

function preload(name, first, second) {  

  // preincarcati imaginile si introducetile intr-o matrice

  if (browserOK) {     
    pics[objCount] = new Array(3);
    pics[objCount][0] = new Image();
    pics[objCount][0].src = first;
    pics[objCount][1] = new Image();
    pics[objCount][1].src = second;
    pics[objCount][2] = name;
    objCount++;
  }
}

function on(name){
  if (browserOK) {
     for (i = 0; i < objCount; i++) {
      if (document.images[pics[i][2]] != null)
        if (name != pics[i][2]) { 
          // 
          document.images[pics[i][2]].src = pics[i][0].src;
        } else {
           // afiseaza cea de-a doua imagine datorita mutarii cursorului deasupra acestei imagini
           document.images[pics[i][2]].src = pics[i][1].src;
        }
    }
  }
}

function off(){
  if (browserOK) {
     for (i = 0; i < objCount; i++) {
      // trimite in spate toate imaginile
      if (document.images[pics[i][2]] != null) 
        document.images[pics[i][2]].src = pics[i][0].src;
    }
  }
}

// preincarcarea imaginilor - trebuie sa specificati care imagini trebuie preincarcate
// si carui obiect Image apartin. Schimbati aceasta parte daca doriti sa folositi imagini diferite 
// (bineinteles ca trebuie sa schimbati si corpul documentului (body).

preload("link1", "img1f.gif", "img1t.gif");
preload("link2", "img2f.gif", "img2t.gif");
preload("link3", "img3f.gif", "img3t.gif");

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



<body>
<a href="link1.htm" onMouseOver="on('link1')" 
  onMouseOut="off()">
<img name="link1" src="link1f.gif" 
  width="140" height="50" border="0"></a>

<a href="link2.htm" onMouseOver="on('link2')" 
  onMouseOut="off()">
<img name="link2" src="link2f.gif" 
  width="140" height="50" border="0"></a>

<a href="link3.htm" onMouseOver="on('link3')" 
  onMouseOut="off()">
<img name="link3" src="link3f.gif" 
  width="140" height="50" border="0"></a>
</body>
</html>
Acest script pune toate imaginile intr-o matrice pics. Functia preload() care este apelata la inceput construieste matricea. Puteti vedea ca apela functia preload() astfel: 
preload("link1", "img1f.gif", "img1t.gif");
Aceasta inseamna ca scriptul trebuie sa incarce doua imagini img1f.gif si img1t.gif. Prima imagine este imaginea care va fi afisata atunci cand cursorul mouselui nu este in interiorul imaginii. Atunci cand cursorul este adus de utilizator deasupra imaginii cea de-a doua imagine este afisata. Cu primul argument "img1" al functiei preload() specificam carui obiect Image de pe pagina web apartin imaginile. Daca va uitati in corpul ( <body> ) exemplului nostru veti gasi o imagine cu numele img1. Folosim numele imaginii (si nu mumarul acesteia) pentru a schimba ordinea imaginilor fara a modifica scriptul.

Cele doua functii on() si off() sunt apelate prin intermediul managerilor de evenimente onMouseOver si onMouseOut. Deoarece imaginile nu pot reactiona la evenimentele MouseOver si MouseOut trebuie sa punem o legatura (link) langa imagini.

Puteti observa ca functia on() trimite in spate toate celelalte imagini. Aceasta este necesar deoarece se poate intampla ca mai multe imagini sa fie afisate accntuat (evenimentul MouseOut nu are loc de exemplu atunci cand utilizatorul muta cursorul de deasupra imaginii direct in afara ferestrei).

Imaginile sunt cu siguranta un mod grozav de a va imbunatati pagina web. Obiectul Image va permite sa creeati efecte sofisticate. Dar va rog sa fiti atenti: nu fiecare imagine sau script JavaScript va imbunatateste pagina. Daca veti naviga pe Internet veti vedea multe exemple unde imaginile sunt folosite intr-un mod teribil. Nu este cantitatea de grafica cea care produce pagini mai bune - ci calitatea. Este cu adevarat enervant sa descarci din retea 50k de grafica proasta. Fiti atenti la asta atunci cand creeati efecte cu imagini in JavaScript si vizitatorii / clientii dumneavoastra va vor revizita pagina.

[previous] [index] [next]

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