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 HTML5 este indicat sa contina meniul cu link-uri de navigare in site?
<section> <nav> <article>
<nav><ul>
 <li><a href="http://coursesweb.net/css/" title="CSS Course">CSS Course</a></li>
 <li><a href="http://www.marplo.net/jocuri/" title="Flash Games">Flash Games</a></li>
</ul></nav>
Ce proprietate CSS muta elementrul in dreapta sau stanga de la locul unde e?
text-align clear float
.some_class {
  width: 30%;
  float: left;
}
Clic pe metoda obiectului Math care rotunjeste numarul x descrescator la cel mai apropiat intreg.
Math.ceil(x) Math.abs(x) Math.floor(x)
var num = 12.34567;
num = Math.floor(num);
alert(num);       // 12
Indicati functia PHP care returneaza numarul de caractere dintr-un sir.
mb_strlen() count() stristr()
$str = "sir cu caractere utf-8 åèö";
$nrchr = mb_strlen($str);
echo $nrchr;        // 29
Clic pe raspunsul potrivit la intrebarea: "When it happened?".
On the 7th of July 1996 It is a quarter to 5. Nice weather.
When it happened? On the 8th of August 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Indicati raspunsul potrivit la intrebarea: "¿Cuando sucedió?".
Hace buen tiempo. En el 8 de Agosto de 2001 Son las tres menos cuarto.
¿Cuando sucedió? En el 8 de Agosto de 2001.
- Cand s-a intamplat? Pe 8 August 2001.
Obiectul image 1

Last accessed pages

  1. Bubbles3 (8789)
  2. The Rise Of Atlantis (1521)
  3. Adjective - Exercitii si teste engleza incepatori (553)
  4. Adjectivul in limba engleza - The adjective (1039)
  5. Creare si editare pagini HTML (2259)

Popular pages this month

  1. Bubbles3 (3364)
  2. Gramatica limbii engleze - Prezentare Generala (3170)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (2266)
  4. Butterfly Kyodai (2167)
  5. Trecutul simplu si continuu - Past Tense Simple and Continuous (1918)