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:

Declararea imaginii care apare in pagina web se face cu sintaxa HTML: 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:
Obiectul "image" are o singura metoda:
Proprietatile obiectului image sunt urmatoarele:

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:
Exemplu JS - obiectul imagine

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

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>
Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?
block list-item inline-block
.some_class {
  display: list-item;
}
Care instructiune JavaScript transforma un obiect in sir JSON.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)
lived living liveing
I`m living here.
- Traiesc /Locuiesc aici.
Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?
vivió vivido viviendo
Estoy viviendo aquí.
- Traiesc /Locuiesc aici.
Obiectul image 1

Last accessed pages

  1. Substantive - Exercitii si teste engleza incepatori (338)
  2. Winters Tale (11)
  3. Mahjong1 (363)
  4. Comparatii de egalitate (9)
  5. Oaia cu mielul, pilda de viata intr-o poveste (3)

Popular pages this month

  1. Bubbles3 (3168)
  2. Gramatica limbii engleze - Prezentare Generala (2455)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (2212)
  4. Butterfly Kyodai (2011)
  5. Zuma Deluxe (1950)