Imagini in documente HTML

Imagini in documente HTML

Imaginile imbogatesc paginile Web nu numai sub aspect decorativ; bogatia informatiei si noile posibilitati de organizare a resurselor fac din imagini un element indispensabil din publicatiile electronice.

Exista doua tipuri de imagini care pot fi vazute de browsere: imagini inline si imagini externe. Imaginile inline sunt imagini care apar direct in paginile web fiind incarcate odata cu pagina. O conditie pentru ca imaginile sa poata fi afisate este salvarea lor intr-unul din formatele recunoscute de browsere: GIF sau JPEG. Imaginile externe sunt imagini care nu sunt afisate la incarcarea paginii. Ele pot fi insa incarcate la cererea utilizatorului. Browserele pot fi configurate sa manipuleze fisiere imagine de diferite tipuri prin utilizarea unor aplicatii auxiliare, astfel ca imaginile externe pot fi salvate in formate diferite:JPEG, PCX, XBM, PICT, etc.

Exista mai multe programe care permit editarea diferitelor formate grafice, cele mai raspandite fiind Adobe Photoshop si Paint Shop Pro. Doua trasaturi fac noile formate GIF (numite GIF89) mai deosebite: formatul intretesut si fundalul transparent. Imaginile transparente sunt imagini la care culoarea (sau modelul) din fundalul imaginii va transpare, dand senzatia ca imaginea pluteste pe suprafata imaginii. Inainte de a le converti trebuie sa ne asiguram ca imaginile au fundalul intr-o singura culoare. Dar fundalul unei imagini se poate izola utilizand un program de editare imagine.

Intreteserea (interlacing) nu schimba felul in care este vazuta imaginea in document ci doar aspectul ei in timp ce este incarcata. Pe masura ce imaginea este adusa de pe net, aparitia ei poate fi gradata, de la o imagine de rezolutie joasa la una de rezolutie mai inalta. Pentru crearea acestui efect este nevoie nu numai ca imaginea sa fie salvata intr-un format special (GIF intretesut) ci si ca browserul sa fie capabil sa prezinte imaginea in timp ce aceasta este incarcata.

Un fisier GIF este salvat linie cu linie (scan lines), incepand cu partea de sus a imaginii si continuand progresiv in partea de jos. Daca navigatorul poate afisa imaginile in timp ce sunt incarcate, mai intai partea de sus a imaginii si apoi tot mai mult din aceasta pe masura ce informatia imaginii ajunge pe sistem.

Imaginile intretesute sunt salvate diferit. La inceput este salvata fiecare a opta linie (incepand cu prima), apoi fiecare a patra linie (incepand cu a patra), apoi fiecare a patra linie (incepand cu a treia), apoi restul randurilor. La incarcarea imaginii fie liniile lipsa sunt umplute cu informatie din liniile deja sosite deja (imaginea apare neclara pana la incarcarea completa) ,fie sunt afisate doar liniile sosite. Daca browserul nu suporta imagini intretesute sau daca este setat sa astepte pana la sosirea intregii imagini inainte de afisare, efectul nu va fi observat. Avantajul unui format intretesut este ca utilizatorul poate avea o idee despre ce anume reprezinta imaginea inainte ca aceasta sa soseasca in intregime si poate sa hotarasca daca sa astepte sa se incarce sau sa intrerupa transferul.

Imaginile inline se specifica cu tag-ul <IMG>. Atributele sale sunt:

SRC - indica URL-ul imaginii care va fi inserata in document

ALT - ia ca valoare textul care va fi afisat de browserele care nu lucreaza in mod grafic

ALIGN - permite controlul alinierii imaginii cu linia de text alaturata. Acesta poate avea urmatoarele valori:

TOP - aliniaza imaginea cu partea de sus a randului

MIDDLE - aliniaza imaginea cu mijlocul randului

BOTTOM - care aliniaza imaginea cu cea mai de jos parte a randului sau cu partea de jos a celei mai mari imagini de pe rand

Exista si alte atribute:

WIDTH - rezerva un spatiu exprimat in pixeli pentru latimea imaginii; daca imaginea este de alta latime va fi scalata astfel incat sa incapa in spatiul rezervat.

HEIGHT - rezerva un spatiu in pixeli pentru inaltimea imaginii; daca imaginea este de alta inaltime va fi scalata astfel incat sa incapa in spatiul rezervat.

Imaginile senzitive sunt o alta facilitate a browserelor. Acestea lucreaza cu ajutorul unui script. Astfel se creeaza o corespondenta intre imaginile mapate si un fisier harta si ca rezultat este apelat un anumit document corespunzator link-ului actionat. Tag-ul ISMAP dispus in interiorul tag IMG declara ca imaginea este una senzitiva.

Maparea imaginii se face cu comenzi de forma diferita. Astfel pentru cerc trebuie precizate coordonatele centrului si raza, pentru dreptunghi coltul stang sus si dreapta jos, iar pentru poligon coordonatele fiecarui nod. Originea sistemului de coordonate (0,0) se afla in coltul stanga sus al imaginii, iar pozitia axei 0Y este in jos. Maparea se poate face manual sau cu ajutorul unui program specializat care permite notarea coordonatelor zonelor prin click cu mouse-ul.