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 HTML5 defineste un text marcat, evidentiat?
<mark> <embed> <span>
<p>Cursuri graruite: <mark>MarPlo.net</mark> , jocuri, anime.</p>
Ce pseudo-clasa CSS defineste un stil la element cand mouse-ul e deasupra lui?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Clic pe functia ce returneaza un sir cu un numar rotunjit la x decimale.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicati functia PHP care adauga continutul unui fisier intr-un array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
Clic pe raspunsul potrivit la intrebarea: "What time is it?"
On the 7th of July 1996 It is a quarter to 5. Nice weather.
What time is it? It is a quarter to 5.
- Cat este ora? E 5 fara un sfert.
Indicati raspunsul potrivit la intrebarea: "¿Qué hora es?"
Hace buen tiempo. En el 7 de julio de 1996 Son las tres menos cuarto.
¿Qué hora es? Son las tres menos cuarto.
- Cat este ora? E 3 fara un sfert.
Lucru cu Imagini in JavaScript

Last accessed pages

  1. Scriere scripturi PHP elementare (1576)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (20736)
  3. Curs PHP MySQL, Tutoriale si Scripturi PHP (6659)
  4. Espanol Chistes - Glume, Bancuri (877)
  5. Sintaxa JavaScript (2435)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2144)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (1480)
  3. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (1072)
  4. Trecutul simplu si continuu - Past Tense Simple and Continuous (1025)
  5. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (981)