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
Ce atribut poate fi utilizat pentru a adauga stiluri CSS direct in tag-ul HTML?
type style class
<div style="width: 80%; border: 3px solid #888888;">Continut</div>
Care din metodele proprietatii CSS transform distorsioneaza elementul HTML la un anumit unghi (inclusiv continutul lui)?
translate() scale() skew()
#un_id {
  transform: skew(20deg, 25deg);
  -ms-transform: skew(20deg, 25deg);   /* IE 9 */
  -webkit-transform: skew(20deg, 25deg);   /* Safari and Chrome */
}
Clic pe functia care poate converti un obiect Date in Sir.
indexOf() toString() getDate()
var rightnow = new Date();
alert( rightnow.toString() );
Care functie aplica o alta functie la elementele unui array?
array_merge() array_search() array_map()
$arr = arra("abc", "<p>xyz</p>", "<em>PHP</em>");
// aplica functia strip_tags() ca sa stearga tag-urile HTML din fiecare element din %arr
$arr = array_map("strip_tags", $arr);
}
Cum se spune "sambata" in limba engleza?
Sunday Saturday Monday
On Saturday I visit my grandparents.
- Sambata imi vizitez bunicii.
Cum se spune "sambata" in limba spaniola?
domingo lunes sábado
Sábado visito mis abuelos.
- Sambata imi vizitez bunicii.
Lucru cu Imagini in JavaScript

Last accessed pages

  1. Viitor perfect (1802)
  2. Curs PHP MySQL, Tutoriale si Scripturi PHP (14526)
  3. Curs si Tutoriale Ajax (4023)
  4. Prezentul simplu si continuu - Present Tense Simple and Continuous (60184)
  5. OOP - Clase abstract si interface (1671)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (2694)
  2. Curs HTML gratuit Tutoriale HTML5 (1965)
  3. Curs si Tutoriale JavaScript (1903)
  4. Curs PHP MySQL, Tutoriale si Scripturi PHP (1849)
  5. Curs CSS Online Tutoriale CSS3 (1701)