Obiectul image – 1 9
Folosind JavaScript puteti crea o multime de efecte imaginilor de pe site.
In aceasta lectie si in urmatoarea veti invata sa lucrati cu obiectul image, sa creati efecte cu ajutorul imaginilor, folosid JavaScript.
1. Imaginile in pagina web
In JavaScript toate imaginile sunt reprezentate intr-o matrice numita images. Aceasta este o proprietate (si subobiect) a obiectului „document”.
Pentru indexarea in matrice (sau tablou), fiecare imagine de pe o pagina web are un anumit numar (index). Prima imagine are numarul 0, cea de-a doua imagine are numarul 1 si asa mai departe.
Astfel, se poate face referire la prima imagine folosind expresia „document.images[0]„.
Fiecare imagine dintr-un document HTML este considarata un obiect Image.
Un obiect Image are mai multe proprietati care pot fi accesate prin JavaScript. De exemplu puteti vedea dimensiunile unei imagini folosind proprietatile „width” si „height”.
Urmatorul exemplu returneaza lungimea (in pixeli) a primei imagini din document:
- document.image[0].height
Declararea imaginii care apare in pagina web se face cu sintaxa HTML:
- <img src=”fisier.gif” name=”nume_img” id=”id_img” />
Daca sunt mai multe imagini pe o singura pagina, e mai dificil sa se lucreze cu ele folosind numarul indexului, de aceea se poate atribui fiecarei imagini cate un nume (cu atributul „name”).
O alta metoda este folosirea proprietatii „getElementById(„id_element”), unde „id_element” este id-ul imaginii dat cu atributul „id=”…”„, ca in exemplu urmator:
- document.nume_img.height
- sau
- document.getElementById(„id_img”).height
Obiectul „image” are o singura metoda:
- handleEvent() – reprezinta evenimentul specificat pentru executarea unei anumite actiunie
Proprietatile obiectului image sunt urmatoarele:
- Border – poate fi doar citita si este latimea marginii din jurul imaginii specificata în pixeli
Alt – specifica textul care va fi afisat in locul imaginii(daca nu poate fi vizualizata de browser)
Align – unde sa fie plasata imaginea
Complete – poate fi doar citita si este o valoare booleana care permite sa stim daca imaginea a fost descarcata complet.
Height – inaltimea in pixeli a imaginii
Hspace – se refera la spatiul din dreapta si stanga imaginii (in pixeli)
Lowsrc – specifica un URL al unei imagini ce va fi afisata la o rezolutie scazuta
Name – se foloseste pentru a da nume unei imagini
Src – specifica URL-ul (adresa si numele) imaginii
usemap – eticheta map
Vspace – spatiul dintre partea de sus si de jos a imaginii
Width – latimea in pixeli a imaginii
2. Incarcarea unei imagini noi
Daca doriti sa schimbati imaginile pe pagina prin JavaScript, se foloseste propprietatea src.
Ca si in eticheta <img>, proprietatea „src” reprezinta adresa imaginii afisate.
Cu JavaScript putem da o noua adresa imaginiii care trebuie incarcate in pagina, astfel imaginea de la noua adresa va inlocui vechea imagine.
Iata un exemplu prin care puteti intelege cum se face aceasta schimbare de imagini:
<img name=”imagine” src=”img1.jpg” width=”155″ height=”155″>
<form>
<input type=”button” onClick=”document.imagine.src=’img2.jpg'” value=”Schimba imaginea”>
</form>
– Imaginea „img1.jpg” este incarcata si ia numele „imagine”.
– Cu linia de cod „document.imagine.src=’img2.jpg’ se inlocuieste fosta imagine „img1.jpg” cu o noua imagine „img2.jpg”, prin apasarea butonului „Schimba imaginea”.
– Imaginea noua va fi afisata in acelasi loc, suprafata de afisare a imaginii ramane aceeasi.
In pagina web exemplul acesta va afisa urmatorul rezultat:
Iata inca un exemplu in care avem o pagina HTML cu doua link-uri (legaturi) care, printr-un script JS schimba afisarea mai multor imagini in acelasi loc. Imaginile sunt declarate si stocate intr-o variabila tablou „imagini”. Pentru schimbarea imaginilor se folosesc 2 functii: „gonext” si „goback”.
<html>
<head>
<title>Titlu</title>
<script type=”text/javascript”>
<!–
imagini = new Array(„img1.jpg”,”img2.jpg”,”img3.jpg”);
nr = 0;
function goback() {
if (document.images && nr > 0) {
nr–;
document.imgs.src=imagini[nr];
}
}
function gonext() {
if (document.images && nr < (imagini.length – 1)) {
nr++;
document.imgs.src=imagini[nr];
}
}
// –>
</script>
</head>
<body>
<h4 align=center>Imagini<br>
<img src=”img/img1.jpg” name=”imgs” width=”155″ height=”155″><br>
<a href=”javascript:goback()”><<- Precedenta</a> |
<a href=”javascript:gonext()”>Urmatoarea ->></a>
</h4>
</body>
</html>
Dupa ce aplicati acest cod intr-un document HTML veti avea in browser urmatorul rezultat:
Imagini
![Exemplu JS 2 - obiectul imagine]()
<< Precedenta | Urmatoarea >>
– Un dezavantaj al scripturilor din aceste doua exemple poate fi faptul ca dupa apasarea butonului „Schimba imaginea” sau a link-ului „urmatoarea >>”, afisearea imagini noi poate intarzia deoarece aceasta trebuie sa fie incarcata de browser dupa apasarea butonului (sau a link-ului). In lectia urmatoare veti invata cum sa evitati acest lucru prin „preincarcarea imaginilor”.
Obiectul image – 2
Aceasta lectie continua prezentarea modului de utilizare a obiectului image, cu exemple ajutatoare si un script complet.
1. Preincarcarea imaginilor
In lectia precedenta a fost explicat modul de incarcare a unei imagini noi in locul altei imagini folosind JavaScript.
In exemplul prezentat anterior la punctul „Incarcarea unei imagini noi”, browserul trebuie sa astepte afisare noi imagini pana cand aceasta este incarcata iar in cazul unor imagini mari asteptarea poate dura prea mult. Acest lucru poate fi evitat prin „preincarcarea imaginilor”, toate imaginile folosite in pagina vor fi incarcate la deschiderea acesteia (printr-un script JS) si vor fi afisate doar atunci cand este executata o comanda de afisare.
Iata un exemplu prin care puteti intelege cum se face aceast lucru:
<script type=”text/javascript”>
<!–
var hiddenImg = new Image();
hiddenImg.src = „img2.jpg”;
//–>
</script>
<img name=”imagine” src=”img1.jpg” width=”155″ height=”155″>
<form>
<input type=”button” onclick=”document.imagine.src=hiddenImg.src” value=”Schimba imaginea”>
</form>
– In interiorul scriptului, prima linie creaza un nou obiect „Image”.
A doua linie defineste adresa imaginii noi care va fi incarcata si reprezentata prin obiectul „hiddenImg”. Astfel imaginea „img2.jpg” este incarcata (dar nu afisata) cand este executata aceasta linie de cod (la deschiderea paginii). Imaginea este pastrata in memorie pentru folosire ulterioara, si anume cand este apasat butonul „Schimba imaginea”, care prin codul „document.imagine.src=hiddenImg.src” va afisa imaginea „img2.jpg” in locul celei actuale (img1.jpg). Afisarea se face imediat, fara a mai astepta incarcarea acesteia.
Daca numarul si marimea imaginilor este mare va dura mai mult incarcarea initiala a paginii, de aceea e bine sa aveti in vedere viteza conexiunii pentru a sti ce metoda este mai indicata.
In pagina web exemplul acesta va afisa urmatorul rezultat:
2. Efecte mouse-over (sau rollover)
Cu mouse-over („MouseOver” si „MouseOut„) se pot crea efecte (precum schimbarea unei poze) care apar la simpla trecere cu mouse-ul deasupra unei zone.
Iata un exemplu foarte simplu:
<a href=”#”
onMouseOver=”document.Imgs.src=’img1.jpg'”
onMouseOut=”document.Imgs.src=’img2.jpg'”>
<img src=”img3.jpg” name=”Imgs” width=”155″ height=”155″ border=”0″></a>
– Dupa cum observati, „onMouseOver” si „onMouseOut” au fost adaugate in interiorul etichetei <a>, e gresit daca le adaugati in eticheta <img>. Imaginile nu pot reactiona la evenimentele „MouseOver” si „MouseOut”, trebuie sa punem o eticheta de legatura (link) langa imagini.
Acest exemplu va afisa in browser urmatorul rezultat:
– Initial este afisata imaginea „img3.jpg”, cand pozitionati mouse-ul deasupra imaginii va fi afisata „img1.jpg” iar dupa ce departati mouse-ul, va apare imaginea „img2.jpg”.
Daca doriti ca efectul de schimbare a imaginii sa apara cand pozitionati mouse-ul pe un link si nu pe imagine, puteti modifica exemplul astfel (<img> va fi adaugat in afara etichetei „<a>…</a>”):
<a href=”#”
onMouseOver=”document.Imgs.src=’img1.jpg'”
onMouseOut=”document.Imgs.src=’img2.jpg'”>Legatura</a><br>
<img src=”img3.jpg” name=”Imgs” width=”155″ height=”155″ border=”0″>
– Acest exemplu este mai mult de studiu pentru a intelege procedeul de utilizare a efectelor „mouse-over”. Nu este potrivit pentru adaugarea intr-o pagina web profesionala deoarece cauzeaza unele probleme:
- Imaginile „img1.jpg” si „img2.jpg” nu au fost preincarcate si astfel apar intarzieri in afisarea lor.
- Daca vom folosi mai multe seturi de imagini trebuie scris codul JavaScripty pentru fiecare separat.
- Pentru folosirea modelului si in alte pagini, poate necesita modificari substantiale.
Iata un script complet care evita problemele de mai sus, desi este mai lung, o data scris poate fi folosit cu usurinta si pt. alte pagini web si cu un numar mai mare de imagini.
<html>
<head>
<script type=”text/javascript”>
<!–
// Daca browserul suporta JavaScript
// Creaza matricea care va stoca imaginile, in variabila pics
browserOK = true;
var pics = new Array();
// –>
</script>
<script type=”text/javascript”>
<!–
var objCount = 0; // numarul imaginilor care se modifica in pagina web
// Functia pentru preancarcarea imaginilor, le introduce intr-o matrice
function preload(name, first, second) {
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 la pozitionarea cursorului deasupra acesteia
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;
}
}
}
// preancarca imaginile – trebuie sa specificati care imagini trebuie preancarcate
// si carui obiect Image apartin. Schimbati aceasta parte daca folositi imagini diferite sau daca adaugati mai multe
// (s-ar putea sa fie nevoie sa schimbati si in corpul documentului (body).
preload(„link1”, „img1.jpg”, „img1t.jpg”);
preload(„link2”, „img2.jpg”, „img2t.jpg”);
preload(„link3”, „img3.jpg”, „img3t.jpg”);
// –>
</script>
</head>
<body>
<a href=”adresa1.htmll” onMouseOver=”on(‘link1’)” onMouseOut=”off()”>
<img name=”link1″ src=”link1.gif” width=”100″ height=”100″ border=”0″></a>
<a href=”adresa2.html” onMouseOver=”on(‘link2’)” onMouseOut=”off()”>
<img name=”link2″ src=”link2.gif” width=”100″ height=”100″ border=”0″></a>
<a href=”adresa2.html” onMouseOver=”on(‘link3’)” onMouseOut=”off()”>
<img name=”link3″ src=”link3.gif” width=”100″ height=”100″ border=”0″></a>
</body>
</html>
Acest exemplu foloseste 3 imagini (respectiv 3 link-uri in BODY), dar puteti adauga si 100.
Scriptul pune toate imaginile intr-o matrice „pics” a carei elemente sunt construite de functia „preload()”, care este apelata la inceput.
Apelul functiei „preload()” se face in felul urmator: „preload(„link1”, „img1.jpg”, „img1t.jpg”);„, ceea ce inseamna ca scriptul trebuie sa incarce doua imagini „img1.jpg” si „img1t.jpg” pentru „link1”. Prima imagine este imaginea care va fi afisata cand cursorul mouse-ului este în exteriorul imaginii. Iar atunci cand cursorul este pozitionat deasupra imaginii, va fi afisata cea de-a doua imagine. Cu primul argument „name” („link1”) al functiei „preload()” specificam carui obiect Image de pe pagina web apartin imaginile. In corpul ( <body> ) al exemplului veti gasi o imagine cu numele „link1”.
Cele doua functii „on()” si „off()” sunt apelate prin evenimentele „onMouseOver” si „onMouseOut”. Puteti observa ca functia „on()” trimite in spate toate celelalte imagini afisate initial (care sunt adaugate direct in eticheta <img>). Aceasta este necesar deoarece se poate intampla ca mai multe imagini sa fie afisate accentuat (de exemplu, evenimentul „MouseOut” nu are loc atunci cand utilizatorul muta cursorul de deasupra imaginii direct în afara ferestrei).
Incercati sa testati si sa studiati acest script, astfel veti intelegeti modul lui de functionare.