1
<img src="../foto/imagine.gif">
obtinem imaginea (src) imagine.gif nedeformata, in marimea ei originala
2
<img src="../foto/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="../foto/imagine.gif">
imaginea se obtine nedeformata, pe 20% din latimea (width) spatiului disponibil (in acest caz intregul ecran)
4
<img height=20% src="../foto/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="../foto/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="../foto/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="../foto/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="../foto/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="../foto/imagine.gif">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 ="../foto/imagine.gif" align=right height=20%><br clear=all>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 ="../foto/imagine.gif" align=right height=20%><br>text text . . . text
text text . . . text
textul nu mai apare sub imagine, ci in stanga ei
13
Cu : <img src="../foto/imagine.gif" align=left height=20%><br>text text . . . text
text text . . . text
textul nu mai apare sub imagine, ci in dreapta ei
14
Fara "align" : <img src="../foto/imagine.gif" height=20% ><br>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="../foto/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="../foto/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="../foto/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="../foto/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="../foto/imagine.gif "
height=20%>text text . . . text
text text . . . text
text text . . . text
textul este aliniat (implicit) la baza imaginii
20
<img src="../foto/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.
21
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 c) Referinte)
pe bara de stare cand luam mouse-ul de pe imagine:
Codul sursa este:
<img height=50 width=50 src="../foto/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">
BluePink 
