Lucru pe Internet - Afaceri Online - Profit din Site-uri Web

Proiectare Site si Web Design - JavaScript - Obiectul Image

Vom examina in continuare obiectul Image ce a aparut odata cu JavaScript 1.1 (deci cu Netscape Navigator 3.0). Cu ajutorul obiectului "Image" putem schimba imaginile din pagina web in functie de evenimentele utilizator. Astfel avem posibilitatea sa creem animatii interactive in paginile web.

Mentionam ca browserele mai vechi (Netscape Navigator 2.0 si Microsoft Internet Explorer 3.0) folosesc JavaScript 1.0 si nu pot sa ruleze scripturile implicand lucrul cu obiecte de tip "Image".

Haideti sa vedem cum pot fi adresate imaginile cu ajutorul JavaScript

Toate imaginile dintr-o pagina web sunt reprezentate si evidentiate in JavaScript printr-o matrice. Aceasta matrice este numita "images". Practic, matricea "images" este o proprietate a obiectului "document". Fiecare imagine de pe o pagina web are atribuit un anumit numar de ordine. 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 dintr-un document HTML este considarata un obiect Image. Un obiect "Image" are o serie de proprietati care pot fi accesate prin JavaScript. De exemplu putem vedea ce dimensiuni are o imagine folosind proprietatile "width" si "height". Concret:

document.images[0].width

furnizeaza latimea (in pixeli) a primei imagini din pagina web.

Daca avem prea multe imagini pe o singura pagina devine din ce in ce mai greu sa le tinem pe toate sub observatie. Atribuirea de nume fiecarei imagini rezolva aceasta problema. Daca declaram o imagine prin tagul:

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

o putem adresa apoi din JavaScript utilizand fie sintaxa: "document.myImage", fie: "document.images["myImage"]".

Incarcarea imaginii noi

Desi este de dorit cate o data sa stim care sunt dimensiunile unei imagini pe o pagina web, nu prea avem neaparat nevoie de acest lucru. Dorim sa putem schimba imaginile pe pagina in functie de evenimentele utilizator (de exemplu trecerea mouse-ului peste imagine). Pentru aceasta folosim proprietatea "src". La fel ca in tagul <img>, proprietatea "src" reprezinta si in JavaScript adresa imaginii afisate. Cu JavaScript 1.1 putem da o noua adresa unei imagini deja incarcate (suprascriind practic aceasta imagine). Rezultatul este ca imaginea de la noua adresa va fi si ea incarcata. Aceasta noua imagine inlocuieste vechea imagine de pe pagina web la declansarea evenimentului utilizator. Iata si un exemplu:

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

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

document.myImage.src= "imagine-2-javascript.gif";

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

Preincarcarea imaginilor

Unul dintre neajunsuri este ca noua imagine este incarcata dupa ce a fost atribuita o noua valoare (adresa) proprietatii "src". Daca imaginea ce urmeaza sa se suprapuna peste vechea imagine la declansarea evenimentului utilizator nu a fost deja incarcata pe calculatorul utilizatorului la incarcarea paginii in browser, este necesara o perioada suplimentara de timp pentru incarcarea imaginii din Internet atunci cand aceasta este solicitata. 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 creem 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 de obiectul "hiddenImg". Am vazut deja ca atribuirea unei noi valori-adresa atributului "src" forteaza browserul sa incarce imaginea de la adresa indicata. Deci imaginea "imagine-2-javascript.gif" este deja incarcata cand cea de-a doua linie de cod este executata. Asa cum sugereaza cuvantul standard "hiddenImg", browserul va presupune ca imaginea nu este afisata dupa ce s-a terminat incarcarea paginii impreuna cu toate elementele sale (text, grafica, javascript, etc...). Imaginea este pastrata in memoria temporara a browserului in vederea unei utilizari ulterioare, cel maiprobabil la declansarea unui eveniment utilizator. Pentru a afisa noua 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 afisa imaginea fara intarzieri. Daca avem un numar mare de imagini pe care le preincarcam este posibil sa avem intarzieri in afisare. Trebuie sa avem 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 la declansarea evenimentului utilizator.

Schimbarea imaginii ca urmare a unor actiuni initiate de utilizator

Putem creea efecte deosebite prin schimbarea imaginilor ca urmare a unor evenimente. Spre exemplu, putem schimba imaginile la trecerea mouseului deasupra unei zone a paginii. Sa testam acest exemplu prin mutarea mouselui deasupra imaginii (mentionam ca se va genera 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="http://www.afaceri-online.net"
onmouseover="document.myImage2.src='../../images/imagine-2-javascript.gif'"
onmouseout="document.myImage2.src='../../images/imagine-javascript.gif'">
<img src="../../images/imagine-javascript.gif"
name="myImage2" width=120 height=38 border=0></A>

Aceasta secventa de cod cauzeaza unele probleme atunci cand:

1. Utilizatorul nu foloseste un browser compatibil JavaScript 1.1.
2. Cea de-a doua imagine nu a fost inca preincarcata.
3. Trebuie rescris codul pentru fiecare imagine in parte.
4. Dorim sa avem un script cu un grad mare de generalitate, asadar care sa poata fi folosit in multe pagini fara modificari substantiale.

Este de dorit sa avem un script care sa poata fi folosit in mai multe pagini, in situatii diverse implicand imagini mai mari sau mai mici, mai multe sau mai putine, plasate ca meniuri in tabele sau constituindu-se ca butoane interactive izolate. Practic sunt trei puncte care trebuie avute in vedere pentru a avea un script flexibil:

Numarul de imagini - nu conteaza daca sunt 10 sau 100 imagini.
Positionarea imaginilor - nu conteaza ca sunt butoane singulare sau meniuri.
Ordinea imaginilor - trebuie sa fie posibila schimbarea ordinii imaginilor fara a fi necesara modificarea codului.

In cartea electronica "Java, JavaScript - Profesional" se prezinta un script complet ce rezolva elegant aceste probleme. Scriptul este mai lung dar universal (cu grad mare de generalitate), aplicabil asadar fara adaptari ulterioare unei game largi de situatii concrete.