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.
length
.O anumita imagine din pagina poate fi preluata mai clar in codul JavaScript folosind metoda getElementById()
sau querySelector()
.
getElementById()
:
querySelector()
:
<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.
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>
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.<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.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>
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()
.
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 }
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 }
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.
<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>
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:
<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>
<input type="number" name="points" min="5" max="80" />
#id { filter:alpha(opacity=40); /* for IE */ opacity:0.4; }
var num = 12.84567; alert( num.toPrecision(3) ); // 12.8
$lang =[10=>"PHP", 20=>"JavaScript", "site"=>"coursesweb.net"); shuffle($lang); var_export($lang); // array (0=>"coursesweb.net", 1=>"PHP", 2=>"JavaScript")
She is the best in our class. - Ea este cea mai buna din clasa noastra.
Él es el mejor en nuestra clase. - El este cel mai bun din clasa noastra.