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:

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".
Inregistrare Detectare Evenimente <<-- Anterior --- Urmator -->> Obiectul image 2

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag e folosit pentru a adauga liste cu definitii in element <dl>?
<dt> <dd> <li>
<dl>
 <dt>HTML</dt>
  <dd> - Hyper Text Markup Language</dd>
  <dd> - Limbaj de cod pentru pagini web</dd>
</dl>
Care proprietate CSS poate sa ascunda un element in pagina, lasand spatiu gol in locul lui?
display position visibility
#id {
  visibility: hidden;
}
Indicati evenimentul declansat cand se apasa clic pe un obiect in pagina.
onclick onmouseover onfocus
document.getElementById("id").onclick = function(){
  alert("http://www.MarPlo.net/");
}
Indicati variabila PHP ce contine datele din $_GET, $_POST si $_COOKIE.
$_SESSION $_GET $_REQUEST
if(isset($_REQUEST["id"])) {
  echo $_REQUEST["id"];
}
Care din urmatoarele cuvinte reprezinta un Verb?
lighting believe path
I believe in my path.
- Eu cred in calea mea.
Care din urmatoarele cuvinte reprezinta un Verb?
creer camino iluminación
creer = a crede; camino = cale /drum; iluminación = iluminare
Obiectul image 1 - Tutorial JavaScript