Curs Javascript


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 tag defineste zona de click intr-o harta creata dintr-o imagine?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?
display overflow position
#id {
  overflow: auto;
}
Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}
Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".
who which whoever
Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.
Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".
que quien cuyo
Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.
Lucru cu Imagini in JavaScript

Last accessed pages

  1. Lucrul cu stiluri CSS (6710)
  2. Cursuri Limba Franceza (8648)
  3. Trecutul nedefinit 3 (316)
  4. Conditional IF - Exercitii si teste engleza incepatori (20117)
  5. Lectia 120, Recapitulareb 109-110 (42)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (617)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (532)
  3. Gramatica limbii engleze - Prezentare Generala (439)
  4. Exercitii engleza - English Tests and exercises - Grammar (379)
  5. Coduri pt culori (362)