Imagini - exemple

Pe HaiSaRadem.ro vei gasi bancuri, glume, imagini, video, fun, bancuri online, bancuri tari, imagini haioase, videoclipuri haioase, distractie online. Nu ne crede pe cuvant, intra pe HaiSaRadem.ro ca sa te convingi.

Imagini - exemple

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

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="../foto/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 ="../foto/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 ="../foto/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="../foto/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="../foto/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="../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.

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">

[ Home ] [ Imagini - marcaje+atribute ]