Obiectul image – 1

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> 
 

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 
nr++; 
document.imgs.src=imagini[nr]; 
} 
} 
// --> 
 
</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

<< 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".

Partajează asta:
Twitter
Facebook
Apreciază Încarc...

Similare