Array-ul images

In JavaScript toate imaginile dintr-o pagina web se gasesc intr-un array denumit images, care apartine obiectului document.
Imaginile sunt adaugate in array-ul images in ordinea in care sunt adaugate in pagina, cu un index de ordine incepand de la 0.
Prima imagine din pagina se afla in array-ul images cu index 0, a doua imagine are index 1, si tot asa.
Astel, se poate face referire la prima imagine folosind urmatoarea expresie.

var img1 = document.images[0];
Numarul de imagini se poate afla cu proprietatea length.
Astel, se poate face referire la ultima imagine folosind urmatorul cod.
var nr_imgs = document.images.length;
var last_img = document.images[nr_imgs -1];

Preluare imagini cu metode JavaScript

O anumita imagine din pagina poate fi preluata mai clar in codul JavaScript folosind metoda getElementById() sau querySelector().

• Daca tag-ul <img> are un ID, se poate folosi getElementById():
var img = document.getElementById('id_img');
Unde 'id_img' este id-ul imaginii (adaugat la atributul id).

• Daca tag-ul <img> are o clasa (adaugata la atributul class), se poate folosi querySelector():
var img = document.querySelector('css_sel');
Unde 'css_sel' reprezinta un selector CSS care face referire la imagine.

- Exemplu, preia imaginea cu class 'cls_im' care se afla intr-un Div cu id 'dv1', iar la clic pe ea afiseaza adresa de la 'src' intr-un element HTML.
<h4>Exemplu preluare imagine cu querySelector</h4>
<p>La click pe imagine adauga la #resp adresa ei de la 'src'.</p>
<div id='dv1'> Div<br>
<img src='javascript/imgs/smile_gift.png' height='115' width='130' alt='Smile' class='cls_im'/>
</div>
<blockquote id='resp'>#resp</blockquote>

<script>
//preia prima imagine cu class .cls_im din #dv1
var img = document.querySelector('#dv1 img.cls_im');

//detecteaza click pe imaginea preluata
img.addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = img.src;
});
</script>

Daca sunt mai multe imagini cu acelasi 'class' in elementul specificat, querySelector() va prelua pe prima.


Obiectul Image

Fiecare imagine dintr-un document HTML reprezinta in JavaScript un obiect Image.
Obiectul Image are proprietati specifice pentru lucru cu imagini.
- De exemplu, cu proprietatea height se poate prelua sau modifica inaltimea imaginii afisata in pagina, iar cu proprietatea width se preia sau se modifica din JS lungimea imaginii.

<h4>Exemplu dimensiuni imagine</h4>
<p>La clic pe butonul 'Set size' mareste dimensiunile imaginii (height si width) cu 50%.</p>
<img src='javascript/imgs/smile_gift.png' alt='Smile' height='115' width='130' id='img1'/><br>
<button id='btn1'>Set size</button>

<script>
var img = document.getElementById('img1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 //preia inaltimea si lungimea imaginii
 let h = img.height;
 let w = img.width;

 //seteaza inaltimea si lungimea cu 50% mai mari
 img.height = h *1.5;
 img.width = w *1.5;
});
</script>

Proprietati obiect Image

alt - returneaza sau seteaza valoarea atributului 'alt'.
<h4>Exemplu alt</h4>
<p>La clic pe imagine, afiseaza la #resp valoarea atributului 'alt'.</p>
<img src='javascript/imgs/smile_gift.png' height='115' width='130' alt='Zambeste' id='im1'/>
<blockquote id='resp'>#resp</blockquote>

<script>
var img = document.getElementById('im1');
img.addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = ev.target.alt;
});
</script>
complete - returneaza True daca imaginea s-a incarcat complet, in caz contrar, False.
<h4>Exemplu complete</h4>
<p>La clic pe buton, aduga la #resp o imagine cu 'display:none;'. Cand imaginea s-a incarcat complet, o face vizibila.</p>
<button id='btn1'>Add img</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var img = document.getElementById('im1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 //adauga imagine la #resp
 document.getElementById('resp').innerHTML ="<img src='javascript/imgs/smile_gift.png' alt='Zambeste' style='display:none;' id='im1'/>";

 //verifica incarcarea imaginii
 document.getElementById('im1').addEventListener('load', (ev)=>{
 //daca s-a incarcat complet, o face vizibila
 if(ev.target.complete) ev.target.style.display ='block';
 });
});
</script>
height - returneaza sau seteaza valoarea atributului 'height'.
<h4>Exemplu height</h4>
<p>La clic pe imagine, afiseaza la #resp valoarea atributului 'height'.</p>
<img src='javascript/imgs/smile_gift.png' height='115' width='130' alt='Zambeste' id='im1'/>
<blockquote id='resp'>#resp</blockquote>

<script>
var img = document.getElementById('im1');
img.addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = ev.target.height;
});
</script>
isMap - returneaza True daca imaginea are setat atributul 'ismap', in caz contrar, False. - Atributul 'ismap' se poate adauga la o imagine adaugata in element <a>. Cand se efectueaza clic pe acea imagine, se trimite la server (la adresa 'href' din acel <a>) coordonatele clicului pe imagine.
<a href='page.php'><img src='image.png' ismap/></a>
Trimite la server coordonatele x/y a clicului pe 'image.png': page.php?x,y
naturalHeight - returneaza inaltimea originala a imaginii.
<h4>Exemplu height / naturalHeight</h4>
<p>La clic pe imagine, afiseaza la #resp valoarea atributului 'height' si inaltimea originala (naturalHeight).</p>
<img src='javascript/imgs/smile_gift.png' height='115' width='130' alt='Zambeste' id='im1'/>
<blockquote id='resp'>#resp</blockquote>

<script>
var img = document.getElementById('im1');
img.addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML ='height = '+ ev.target.height +'<br>naturalHeight = '+ ev.target.naturalHeight;
});
</script>
naturalWidth - returneaza lungimea originala a imaginii.
<h4>Exemplu width / naturalWidth</h4>
<p>La clic pe imagine, afiseaza la #resp valoarea atributului 'width' si lungimea originala (naturalWidth).</p>
<img src='javascript/imgs/smile_gift.png' height='115' width='130' alt='Zambeste' id='im1'/>
<blockquote id='resp'>#resp</blockquote>

<script>
var img = document.getElementById('im1');
img.addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML ='width = '+ ev.target.width +'<br>naturalWidth = '+ ev.target.naturalWidth;
});
</script>
src - returneaza sau seteaza valoarea atributului 'src'.
<h4>Exemplu src</h4>
<p>La clic pe imagine, afiseaza la #resp numele din adresa 'src'.</p>
<img src='javascript/imgs/smile_gift.png' height='115' width='130' alt='Zambeste' id='im1'/>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('im1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = ev.target.src.match(/[^\/]+$/i)[0];
});
</script>
useMap - returneaza sau seteaza valoarea atributului 'usemap' dintr-o imagine. - Atributul usemap seteaza o imagine cu mai multe zone clicabile, unde fiecare zona poate sa deschida o adresa diferita.
Vedeti tutorialul de la: marplo.net/html/harti_de_imagini.html
width - returneaza sau seteaza valoarea atributului 'width'.
<h4>Exemplu width</h4>
<p>La clic pe imagine, afiseaza la #resp valoarea atributului 'width'.</p>
<img src='javascript/imgs/smile_gift.png' height='115' width='130' alt='Zambeste' id='im1'/>
<blockquote id='resp'>#resp</blockquote>

<script>
var img = document.getElementById('im1');
img.addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = ev.target.width;
});
</script>

Preluare mai multe imagini dintr-un element HTML

Daca intr-un element HTML aveti mai multe imagini si vreti sa le preluati in JavaScript, se poate folosi una din aceste metode: getElementsByTagName('img') sau querySelectorAll('css_sel') ('css_sel' e selectorul CSS ce reprezinta imaginile).
Ambele metode returneaza un array cu elementele preluate, si pot fi parcurse cu instructiunea for().


- Exemplu cu getElementsByTagName('img'):
//preia toate imaginile dintr-un element cu id 'dv1'
var imgs = document.getElementById('dv1').getElementsByTagName('img');

//parcurge imaginile
for(var i=0; i<imgs.length; i++){
 //cod executat la fiecare imagine parcursa
}

- Exemplu cu querySelectorAll():
//preia toate imaginile cu class 'cls_im' dintr-un element cu id 'dv1'
var imgs = document.querySelectorAll('#dv1 img.cls_im');

//parcurge imaginile
for(var i=0; i<imgs.length; i++){
 //cod executat la fiecare imagine parcursa
}

Schimbare Imagine cu alta

Daca doriti sa schimbati o imagine din pagina cu una de la o alta adresa, se poate simplu, modificand adresa de la 'src' cu cea noua.

var img = document.getElementById('id_img');
img.src ='adresa/alta_imagine.jpg';

- Iata un exemplu practic. La clic pe un buton se schimba in acelasi loc imagini cu adrese dintr-un array.
<h4>Exemplu schimbare imagini</h4>
<p>La click pe butonul 'Schimba imaginea' se afiseaza o noua imagine cu adresa preluata dintr-un array cu 4 adrese.</p>
<img src='javascript/imgs/sunshine.jpg' id='im1' height='235' width='340' alt='Image'/><br>
<button id='btn1'>Schimba imaginea</button>

<script>
//array cu imagini
var imgs =['sunshine.jpg', 'spring_dream.jpg', 'spring_dream1.jpg', 'waterfall.jpg'];
var icm =0; //idexul imaginii curente

var img = document.getElementById('im1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 icm++;
 if(icm >= imgs.length) icm =0; //trece la 0 dupa ce ajunge la ultima
 img.src ='javascript/imgs/'+ imgs[icm];
});
</script>

Preincarcare imagini

In exemplul precedent, la clic pentru schimbare imagine browserul trebuie sa astepte afisare noi imagini pana cand aceasta este incarcata; iar in cazul unor imagini mari asteptarea poate dura prea mult. Acest lucru poate fi evitat prin "preincarcarea imaginilor", folosind o instanta de obiect Image.
Sintaxa:

var obimg = new Image();
obimg.src ='adresa_img.jpg'; //preincarca imaginea
- Acest cod incarca imaginea in JavaScript, fiind valabila spre afisare rapida din obiectul 'obimg'.

- Iata un exemplu practic. Cand mouse-ul intra pe suprafata unei imagini se schimba imaginea, cand mouse-ul iese din suprafata ei se adauga o alta imagine.
Pentru o afisare imediata, imaginile sunt preincarcate cu obiectul Image.
<h4>Exemplu schimbare imagini la trecere cu mouse-ul</h4>
<p>Treceti cu mouse-ul pe urmatoarea imagine, apoi mutati-l in afara ei.</p>
<img src='javascript/imgs/spring_dream.jpg' id='im1' height='235' width='340' alt='Image'/>

<script>
//obiect cu imagini pt. enter si leave
var imgs ={enter:'spring_dream1.jpg', leave:'waterfall.jpg'};
var obimg ={}; //va contine imaginile preincarcate


//pt. preincarcare imaginilor din imgs
function preloadImgs(imgs){
 //parcurge imgs si seteaza in obimg obiecte Image cu fiecare (cu adresa preincarcata)
 for(var k in imgs){
 obimg[k] = new Image();
 obimg[k].src ='javascript/imgs/'+ imgs[k];
 }
}

//apeleaza functia cu imaginile ce trebuie preincarcate
preloadImgs(imgs);

//inregistreaza eveniente 'mouseenter' si 'mouseleave' la img
var img = document.getElementById('im1');
img.addEventListener('mouseenter', (ev)=>{
 //adauga imaginea preincarcata din obimg
 img.src = obimg.enter.src;
});
img.addEventListener('mouseleave', (ev)=>{
 //adauga imaginea preincarcata din obimg
 img.src = obimg.leave.src;
});
</script>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care meta tag se foloseste pentru scurta descriere a paginii?
<meta content="..."> <meta description="..."> <meta http-equiv="...">
<meta name="description" content="70-160 caractere ce descriu continutul paginii" />
Ce proprietate CSS opreste efectul dat de "float"?
clear text-align position
#some_id {
  clear: both;
}
Clic pe metoda ce creaza un array cu toate elementele din pagina cu un anumit nume de tag.
getElementsByName() getElementById() getElementsByTagName()
var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);
Indicati functia PHP ce returneaza numarul de elemente dintr-un array.
is_[) count() strlen()
$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4
Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "I live (happy)".
happly happily hapily
I live happily.
- Traiesc fericit (in mod fericit).
Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "Vivo (feliz)".
felizamente felizmente felices
Vivo felizmente.
- Traiesc fericit (cu fericire).
Lucru cu Imagini in JavaScript

Last accessed pages

  1. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (22066)
  2. Gramatica limbii engleze - Prezentare Generala (72291)
  3. Prepozitii - Prepositions (7819)
  4. HTML5 - Elemente si atribute noi in formular (1341)
  5. HTML5 - Tag-uri Noi (1020)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2613)
  2. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (1259)
  3. Prezentul simplu si continuu - Present Tense Simple and Continuous (827)
  4. Gramatica limbii spaniole. Indrumator si prezentare generala (807)
  5. Alphabet and Pronunciation - Alfabetul si pronuntia in limba engleza (744)