IMG-atribute

1 <img src="../imagini/imagine.gif">

obtinem imaginea (src) imagine.gif nedeformata, in marimea ei originala

2 <img src="../imagini/imagine.gif" border=10>

obtinem imaginea imagine.gif in marimea ei originala, nedeformata, cu un chenar (border) de 10 pixeli

3 <img width=20% src="../imagini/imagine.gif">

imaginea se obtine nedeformata, pe 20% din latimea (width) spatiului disponibil (in acest caz intregul ecran)

4 <img height=20% src="../imagini/imagine.gif">

imaginea se obtine nedeformata, pe 20% din inaltimea (height) spatiului disponibil (in acest caz intregul ecran)

5 <img width=90% height=50% src="../imagini/imagine.gif">

imaginea se obtine deformata, pe o latime (width) de 90% si inaltime (height) 50% din spatiul disponibil (in acest caz un tabel de 400x200 pixeli)

6 <img src="../imagini/imagine.gif" width=70 height=70>

imaginea se obtine nedeformata (deoarece pentru ambele dimensiuni am pastrat proportia de 7/20 fata de original), inalta (height) de 70 si lata (width) de 70 pixeli

7 <img src="../imagini/imagine.gif" width=70 height=70%>

imaginea se obtine deformata, inalta (height) de 70 % din inaltimea spatiului disponibil si lata (width) de 70 pixeli

8 <img alt="imagine..." width=20% src="../imagini/imagine.gif">

imaginea se obtine nedeformata, pe 20% din latimea (width) spatiului disponibil (in acest caz intregul ecran); alt = "imagine" reprezinta textul alternativ (apare daca lasam mouse-ul nemiscat deasupra imaginii sau la cei ce navigheaza fara imagini); este recomandata folosirea atributului alt

9 text<img hspace=50 height=50 width=100 src="../imagini/imagine.gif">text

text

imaginea se obtine deformata, cu o latime (width) de 100 pixeli si inaltime (height) de 50 pixeli; in stanga si dreapta imaginii exista un spatiu pe orizontala (hspace) de 50 pixeli

10 text <img vspace=50 height=50 width=100 src="../imagini/imagine.gif"> text

text

imaginea se obtine deformata, cu o latime (width) de 100 pixeli si inaltime (height) de 50 pixeli; deasupra si dedesubtul imaginii exista un spatiu pe verticala (vspace) de 50 pixeli

Alinierea imaginii in pagina

11 <img src ="../imagini/imagine.gif" align=right height=20%> text text . . . text

text text . . . text
imaginea se obtine nedeformata, la 20 % din latimea spatiului disponibil, aliniata (align) la dreapta; este necesar br clear=all sau br clear=right pentru ca textul sa apara sub imagine.

12 Cu : <img src ="../imagini/imagine.gif" align=right height=20%> text text . . . text

text text . . . text
textul nu mai apare sub imagine, ci in stanga ei

13 Cu : <img src="../imagini/imagine.gif" align=left height=20%> text text . . . text

text text . . . text
textul nu mai apare sub imagine, ci in dreapta ei

14 Fara "align" : <img src="../imagini/imagine.gif" height=20% > text text . . . text

text text . . . text
textul apare sub imagine

15 Deoarece "align" nu primeste valoarea "center" putem folosi:
text1 text1 . . . text1<center><img src="../imagini/imagine.gif " height=20%></center>text text . . . text
text1 text1 . . . text1

text text . . . text
textul apare sub imagine

Alinierea elementelor din jurul imaginii

16 Cu : text text . . . text<img src="../imagini/imagine.gif" align=top height=20%>text text . . . text
text text . . . text

text text . . . text
textul este aliniat la partea superioara a imaginii

17 Cu : text text . . . text<img src="../imagini/imagine.gif" align=middle height=20%>text text . . . text
text text . . . text

text text . . . text
textul este aliniat la jumatatea imaginii

18 Cu : text text . . . text<img src="../imagini/imagine.gif" align=bottom height=20%>text text . . . text
text text . . . text

text text . . . text
textul este aliniat la baza imaginii

19 Fara "align" : text text . . . text<img src="../imagini/imagine.gif " height=20%>text text . . . text
text text . . . text

text text . . . text
textul este aliniat (implicit) la baza imaginii

20 <img src="../imagini/hello.gif" border=1 width=150 height=60>

Exista fisiere .gif animate si / sau transparente; dupa cum vedeti hello.gif le imbina pe amandoua. Aceeasi imagine este plasata in ambele celule ale unui tabel cu o linie si doua coloane: pentru prima celula nu este specificata culoarea fondului celulei (deci ia culoarea paginii); pentru a doua este dat un fond galben, care se "vede" prin imagine.

Putem face sa apara un text pe bara de stare a browserului (deasupra butonului "Start")atunci cand mouse-ul este plasat deasupra unei imagini si un alt text care ramane (aveti grija sa alegeti un text potrivit oricarei situatii - plasati mouse-ul pe imagine, apoi si pe legaturile "Home" si "Imagini" de mai jos si veti intelege la ce ma refer; acest subiect il gasiti tratat mai pe larg la Referinte pe bara de stare cand luam mouse-ul de pe imagine:

Codul sursa este:

<img height=50 width=50 src="../imagini/imagine.gif" alt="imaginea 
reprezinta ..." OnMouseOut="self.status='text ce ramane pe bara de stare 
cand luam mouse-ul de pe imagine';return true" OnMouseOver="self.status='text 
ce apare pe bara de stare cand mouse-ul este deasupra imaginii';return true">