Cap.8.

Utilizarea imaginilor
Inserarea unei imagini
Pentru a marca prezenta unei imagini in document se foloseste elementul IMG, al carui
atribut Src este URL-ul fisierului imagine. Tipurile de fisiere-imagine compatibile cu HTML sunt
GIF,
JPEG
si
PNG.
Exemplu:
<IMG src = "Imagini/Peisaj.gif">
Elementul IMG nu are eticheta de incheiere deoarece elementul nu are continut pe care sa-l includa.
Ar fi bine ca atunci cand inserati o imagine sa folositi si atributul Alt care specifica un text care va fi afisat in
locul imaginii in cazul in care browser-ul nu lucreaza decat in mod text sau in cazul in care utilizatorul decide sa
renunte la incarcarea imaginilor (optiune oferita de programele de navigare Web). Daca imaginea este afisata,
valoarea atributului Alt va fi folosita ca mesaj "tool-tip" .
In cazul in care doriti sa prezentati in cadrul documentului un anumit numar de imagini a caror dimensiune
ar afecta dramatic timpul de incarcare al documentului in fereastra programului de explorare se poate aplica
urmatoarea
tehnica:
Se creeaza copii de dimensiuni mici ale acestor imagini. Aceste copii vor fi incarcate in document si vor
avea rolul unor legaturi catre fisierele ce contin imaginile in dimensiunea lor initiala. Atunci cand utilizatorul va
activa una dintre aceste legaturi in fereastra se va incarca fisierul imagine dorit
Pentru a aranja imaginea in raport cu textul din vecinatatea sa se foloseste atributul align. Valorile posibile
sunt:
bottom - pentru alinierea textului la baza inferioara a imaginii (valoare implicita)
middle sau center - pentru alinierea textului pe centrul imaginii
top - pentru alinierea textului la baza superioara a imaginii
left - pentru a plasa imaginea in extremitatea stanga a elementului container, iar blocul de text eventual
existent dupa marcajul imaginii respective ocupand spatiul liber din dreapta si de sub ea.
right - pentru a plasa imaginea in extremitatea dreapta a elementului container, iar blocul de text eventual
existent dupa marcajul imaginii respective ocupand spatiul liber din stanga si de sub ea.
In cazul ultimelor doua valori poate aparea situatia in care un bloc de text trebuie "fortat sa coboare" pe
prima linie de sub imagine. In acest caz se foloseste atributul clear al elementului BR care apare inaintea blocului
de text pe care vrem sa il translatam. Valorile acestui atribut pot fi:

left - pentru ca textul sa fie deplasat in jos pana in pozitia in care marginea din stanga este libera

right - pentru ca textul sa fie deplasat in jos pana in pozitia in care marginea din dreapta este
libera

all - pentru ca textul sa fie deplasat in jos pana in pozitia in care ambele margini sunt libere
Exemplu: Folosirea imaginilor in document
<h1>Inserarea imaginii in document</h1>
Pozitionarea implicita a textului
<img src="../Imagini/burger.jpg" width="100" height="100" border="0" alt="masa de pranz">
este la baza imaginii
<p> Pozitionarea textului
<img src="../Imagini/burger.jpg" width="100" height="100" border="0" alt="masa de pranz" align="middle">
pe centrul imaginii
<p> Pozitionarea textului la baza superioara
<img src="../Imagini/burger.jpg" width="100" height="100" border="0" alt="masa de pranz" align="top">
a imaginii
<hr>
<img src="../Imagini/pericol.jpg" width="100" height="100" border="0" align="left" alt="">
Imaginea este <br>
pozitionata in stanga documentului, lasand textul<br>
sa ocupe spatiul liber din dreapta.<br clear="left">
Acest pasaj este fortat sa coboare sub imagine!
<p>
<hr>
<img src="../Imagini/pericol.jpg" width="100" height="100" border="0" align="right" alt="">
Imaginea este <br>
pozitionata in dreapta documentului, lasand textul sa ocupe spatiul liber din stanga.<br clear="right">

Cap.8 - 1 -

Acest pasaj este fortat sa coboare sub imagine!

Pentru a controla spatiul vertical sau orizontal din jurul imaginii inserate in document se folosesc atributele
vspace si hspace . Valorile atribuite desemneaza numarul de pixeli care vor distanta imaginea de elementele
adiacente ei in cadrul documentului
Atributele width si height stabilesc dimensiunile suprafetei din document care va fi ocupata de imagine.
Precizarea acestor atribute determina o mai rapida incarcare a documentului in fereastra programului de explorare,
dar in cazul precizarii unor dimensiuni care nu corespund dimensiunilor reale ale imaginii aceasta va fi deformata
pentu a acoperii exact suprafata precizata.
Folosirea atributului border determina afisarea unui chenar care va incadra imaginea. Valoarea acestui
atribut va reprezenta grosimea chenarului, o valoare egala cu 0 (valoare implicita) determinand afisarea imaginii
fara chenar.
Exemplu: Precizare atributelor pentru dimensiunile, bordura si spatiul din jurul imaginii
<h1>Dimensiuni, borduri si extra-spatiu la imagini</h1>
Imagine cu dimensiunile implicite:<br>
<img src="../Imagini/toamna.jpg" border="0" alt="">
<p>
Imagine cu dimensiuni marite:<br>
<img src="../Imagini/toamna.jpg" border="0" alt="" width="200" height="200">
<p>
Imagine cu dimensiuni micsorate:<br>
<img src="../Imagini/toamna.jpg" border="0" alt="" width="50" height="50">
<hr>
Imagine cu bordura si extraspatiu. <br>
<img src="../Imagini/toamna.jpg" border="5" alt="" width="100" height="100" hspace="100" vspace="50"
align="left">
Observati distanta dintre imagine si textul <br>
de deasupra si din dreapta ei<br>
Text<br>
Text<br>
Text<br>

Folosirea imaginilor ca elemente "ancora"

In documentele HTML se folosesc frecvent imaginile pe post de ancore, adica legaturi catre alte
documente sau programe. Acest lucru se poate realiza foarte usor prin plasarea imaginii in interiorul unui element
ancora (A). Exemplu:
<a href = "pagina1.html"><img src = "imaginea1.gif" alt = "pagina1"></a>
Observati introducerea textului alternativ care devine obligatoriu in cazul in care imaginea nu poate fi
afisata de catre browser.
In momentul incadrarii elementului imagine intre controalele <a> si </a>, browserele adauga imaginii o
bordura. Pentru a evita aparitia ei folositi atributul border cu o valoare atribuita egala cu 0.
Exista insa si posibilitatea ca aceea si imagine sa fie ancora pentru mai multe legaturi prin definirea unei harti de
imagine.
O harta de imagine este un element grafic (imagine) care dispune de una sau mai multe regiuni
reprezentand legaturi cu alte document sau programe din Web. Daca vreti, se poate spune ca o harta de imagine
aste
asemanatoare
unei
liste
in
care
fiecare
item
reprezinta
o
legatura
hipertext.
Exista doua tipuri de harti de imagine. Primul, harta de imagine pe server, este veche si neconvenabila datorita
necesitatii schimbului de informatii cu serverul, procedura care trebuie - pe cat posibil- evitata.
Al doilea tip de harta este harta de imagine la client, denumita astfel deoarece legaturile hartii cu alte documente
sau programe sunt expuse in cadrul documentului si gestionate de catre programul de explorare Web utilizat de
client. Despre aceasta ne vom ocupa in cele ce urmeaza.
Pentru ca o imagine sa devina harta de imagine, ea trebuie pusa in legatura cu un element de marcaj
HTML numit MAP.
Acest element va contine, de fapt, lista regiunilor senzitive din cadrul imaginii. Fiecarea regiune este
marcata la randul ei de marcajul AREA.

Cap.8 - 2 -

Exemplu: Ancore si harti de imagine

<h1>Imagini ancora si harti de imagine</h1>
<p>
<hr>
<p>
<h2 align = "center">Componentele de baza ale unui calculator:</h2>
<p>
<!--Acesta este un tabel. Despre el vom vorbi in capitolulurmator -->
<table width="800" cellpadding="2">
<tr>
<td><a href="UC.html"><img src="../Imagini/UnitatecentralaB.jpg" border=0></a></td>
<td><a href="Monitor.html"><img src="../Imagini/MonitorB.jpg" border=0></a></td>
<td><a href="Tastatura.html"><img src="../Imagini/TastaturaB.jpg" border=0></a></td>
<td><a href="Mouse.html"><img src="../Imagini/MouseB.jpg" border=0></a></td>
</tr>
</table>
<p>&nbsp;
<hr width=20%>
<p style ="color:blue;font-size:24">
Folositi imaginea pentru a gasi legaturile spre paginile corespunzatoare diverselor componente:
<p>
<a name="harta"><img src="../Imagini/POWER.jpg" border="0" usemap="#Map" align="left"> </a>
<map name="Map">
<area shape="poly" coords="295,50,223,101,226,189,273,192,276,348,301,365,314,365,319,382,423,381,417,53"
href="UC.html" alt="Unitatea centrala">
<area shape="rect" coords="84,193,276,349" href="Monitor.html" alt="Monitorul">
<area shape="circle" coords="365,418,28" href="Mouse.html" alt="Mouseul">
<area shape="poly" coords="19,419,52,368,313,365,320,421" href="Tastatura.html" alt="Tastatura">
</map>
Atributele care insotesc o astfel de regiune sunt:
shape - defineste forma regiunii respective. Valorile posibile sunt:
rect - pentru dreptunghi
circle - pentru cerc
poly - pentru un poligon oarecare
coords - specifica coordonatele figurii respective. Numarul si semnificatia lor difera in functie de forma
aleasa :
o rect:x1,y1,x2,y2 - unde x1,y1 sunt coordonatele coltului din stanga sus, iar x2,y2 sunt
coordonatele coltului din dreapta jos
o circ:x,y,r - unde x,y sunt coordonatele centrului, iar r este raza cercului
o poly:x1,y1,x2,y2,....,xn,yn - unde fiecare pereche de forma xi,yi reprezinta coordonatele unui varf
al poligonului
href - reprezinta referinta hipertext catre documentul sau programul dorit
nohref - specifica faptul ca regiunea nu reprezinta o legatura in Web
alt - specifica textul de afisat ca alternativa la imagine
Un element MAP trebuie sa aiba un atribut de identificare name a carui valoare va fi numele hartii. El este
folosit pentru a transforma o imagine intr-o harta. Astfel, se va folosi atributul usemap al elementului IMG a carui
valoare desemneaza harta folosita pe imaginea respectiva.

Folosirea clipurilor video in Internet Explorer

Internet Explorer permite inserarea foarte simpla a fisierelor de tip "imagine dinamica" (clipuri video) in
acelasi mod in care se insereaza o imagine statica. Astfel, pentru elementul IMG se folosesc atributele:
dynsrc - pentru a determina URL-ul fisierului imagine
loop - pentru a determina de cate ori va fi rulat clipul respectiv. Valoare implicita este "1". O valoare egala
cu 0 sau -1 determina rularea continua a clipului
start - determina momentul de start al clipului. Acesta poate fi "fileopen" ( valoare implicita) pentru pornirea
clipului odata cu incarcarea paginii in browser, sau "mouseover" pentru pornirea lui atunci cand cursorul
mouse-ului este pozitionat deasupra sa.

Cap.8 - 3 -

Pentru a insera in document un clip video sau audio care sa poata fi redat si de alte browsere se poate folosi
elementul embed cu atributele:
src - pentru a preciza sursa fisierului audio sau video folosit
width si height - pentru a preciza dimensiunea ocupata de obiectul respectiv in document.
Reusita inserarii unui astfel de clip depinde ded extensia fisierului folosit si de versiunea browserului. Pentru
fisierele video e preferabil sa folositi extensiile "mpg" sau "mov" , iar pentru cele audio formatul "mp3".
Exemplu: Inserarea unui clip video in document
<html>
<head>
<title>Inserarea unui clip video</title>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#8080FF">
<h1>E pur si muove...</h1>
<img border="0" dynsrc="../Imagini/Globe.avi" loop="-1" start="fileopen" alt="acest videoclip poate fi vizualizat doar
daca folositi Internet Explorer">
<h1>Folosirea elementului <b>OBJECT</b></h1>
<object>
<embed src="../Imagini/Sample3.mpg" width=200, height=200 >
</embed>
</object>
</body>
</html>

Cap.8 - 4 -