Documente Academic
Documente Profesional
Documente Cultură
Cap.8. Utilizarea Imaginilor: IMG SRC
Cap.8. Utilizarea Imaginilor: IMG SRC
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
Cap.8 - 1 -
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
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>
<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>
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.
Cap.8 - 3 -
● 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".
<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 -