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
Care tag afiseaza textul oblic?
<strong> <pre> <em>
<p>Cursuri, Jocuri, Anime: <em>www.MarPlo.net</em></p>
Care proprietate CSS defineste spatiul dintre continutul elementului si bordura lui?
margin padding position
h3 {
  padding: 2px 0.2em;
}
Clic pe metoda ce returneaza primul element indicat de selectorii specificati.
getElementsByName() querySelector() querySelectorAll()
// preia primul Div cu class="cls", si afiseaza continutul
var elm = document.querySelector("div.cls");
alert(elm.innerHTML);
Indicati variabila PHP ce contine datele din formular trimise cu method="post".
$_SESSION $_GET $_POST
if(isset($_POST["field"])) {
  echo $_POST["field"];
}
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) speak english".
I They We
We speak english.
- Noi vorbim engleza.
Indicati pronumele corespunzator celui din paranteza in propozitia: "(Noi) hablamos español".
Ellos Vosotros Nosotros
Nosotros hablamos español.
- Noi vorbim spaniola.
Obiectul image 1

Last accessed pages

  1. Verbe modale - Modal verbs - CAN, COULD, MAY, MIGHT, MUST (13556)
  2. Cursuri Limba Rusa (850)
  3. Notiuni fundamentale despre bazele de date SQL (2603)
  4. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (12423)
  5. MySQL Alias si functii (256)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (1962)
  2. Creare si editare pagini HTML (1112)
  3. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (1043)
  4. Curs HTML gratuit Tutoriale HTML5 (949)
  5. Coduri pt culori (783)