Maparea imaginilor

Efectele sunt mult mai spectaculoase atunci când se creeaza legaturi nu pe o întreaga imagine, ci pe anumite zone din imagine. De exemplu, într-o pagina Web despre tara noastra, am putea insera o imagine cu harta tarii. Pe fiecare judet de pe harta am putea crea o legatura, prin activarea careia sa se deschida în fereastra browser-ului o pagina Web cu informatii despre judetul respectiv.

Pentru aceasta, trebuie sa atasam imaginii o descriere în care sa specificam zonele senzitive ale imaginii. Aceasta operatie, prin care se obtine o harta a imaginii, este denumita mapare.

În functie de ,,cine" interpreteaza coordonatele pixelului activat printr-un clic si executa actiunea corespunzatoare, exista doua tipuri de mapare :

a)    Client (Client-side) - harta grafica este interpretata de catre browser, definirea zonelor senzitive ale imaginii si a legaturilor fund introdusa în document 353y244d ul HTML.
Când un utilizator activeaza printr-un clic o zona a imaginii, browser-ul calculeaza
coordonatele pixelului pe care s-a executat clic si tot browser-ul executa actiunea
necesara.

b)    Server (Server-side) - harta grafica este interpretata de catre server, cu ajutorul unui program (de obicei de tip CGI). Când un utilizator activeaza o zona a imaginii,
coordonatele pixelului pe care s-a executat clic sunt transmise catre server. Serverul interpreteaza coordonatele si executa actiunea necesara.

Maparea de tip client este preferabila deoarece este mai usor de construit, nu solicita serverul si deci poate fi vizualizata si lucrând off-line (neconectati, local).

Pentru a asocia unei imagini o harta grafica, se utilizeaza în cadrul elementului IMG atributul USEMAP:

USEMAP = "#nume-harta"

unde nume-harta reprezinta numele asociat hartii la descrierea ei.

Pentru a descrie harta unei imagini se utilizeaza elementul MAP. Între eticheta de început <MAP> si cea de sfârsit </MAP> sunt încadrate descrierile zonelor senzitive ale imaginii. Elementul MAP admite un singur atribut (NAME), prin intermediul caruia asociem hartii grafice un nume ce poate fi utilizat de atributul USEMAP.

<MAP NAME="nume-harta">

descriere-zona 1

descriere-zona 2

</MAP>

Descrierea unei zone senzitive a imaginii se realizeaza cu ajutorul elementului AREA, care admire urmatoarele atribute :

SHAPE = DEFAULT | RECT | CIRCLE | POLY

specifica forma geometrica a zonei:

DEFAULT defineste întreaga zona;

RECT defineste o zona dreptunghiulara;

CIRCLE defmeste o zona circulara;

POLY defineste o zona poligonala.

COORDS = coordonate, specifica pozitia zonei pe ecran, prin coordonatele ei. Coordonatele depind de forma geometrica a zonei:

Valorile coordonatelor sunt relative la coltul stânga sus al imaginii si se precizeaza in ordinea din tabelul de mai sus, separate prin virgula.

Pentru zonele de forma circulara, raza cercului poate fi specificata si in procente. în acest caz, procentul se calculeaza din minimul dintre înaltimea si latimea imaginii.

NOHREF când este precizat, acest atribut specifica faptul ca acestei zone nu i se asociaza nici o legatura.

HREF=URL

specifica adresa resursei la care se creeaza legatura corespunzatoare zonei.

ALT=sir-de-caractere

specifica un text alternativ, o scurta descriere a zonei, ce va fi afisata într-o mica fereastra când cursorul mouse-ului întârzie asupra zonei respective.

De exemplu, sa consideram ca dorim ca realizam un tutorial on-line despre Netscape Communicator. Pentru a prezenta meniul ferestrei Netscape Communicator, vom utiliza un utilitar de captura a imaginilor (Corel Capture, WinCopy etc.) sau vom capta imaginea folosind tasta Print Screen pentru a crea un fisier gif cu imaginea meniului. Vom insera în tutorial aceasta imagine mapata, astfel încât un clic pe oricare din meniuri sa deschida în fereastra browser-ului un document cu informatii despre toate optiunile din meniul respectiv.

Descriere

<IMG SRC= "Meniu.gif" ALT="Meniul Netscape Communicator^"

Height=20 Width=231 USEMAP="#hmenu">

<MAP NAME="hmenu">

<AREA HREF="file.htm" ALT="Meniul File"

SHAPE="rectⁿ

COORDS="0,0,30,19">

<AREA HREF=ⁿedit.htm" ALT="Meniul Edit"

SHAPE="rect^"

COORDS="31,0,57,19ⁿ>

<AREA HREF=view.htm" ALT="Meniul View"

SHAPE="rect"

COORDS="58,0,92,19">

<AREA HREF="go.htm" ALT="Meniul Go"

SHAPE="rect"

COORDS="93,0,120,19">

<AREA HREF="communic.htmⁿ ALT="Meniul Communicator"

SHAPE="rect"

COORDS="121,0,200,19">

<AREA HREF="help.htm" ALT="Meniul Help"

SHAPE="rect"

COORDS="201,0,237,19">

</MAP>

Observatii:

Zonele definite prin intermediul elementului AREA în cadrul
aceluiasi element MAP nu au obligatoriu aceeasi forma geometrica.

Daca doua sau mai multe zone se suprapun, are prioritate cea
defmita prima.

5. Inserarea elementelor multimedia în documente HTML

Initial limbajul HTML permitea crearea paginilor Web care contineau doar text si legaturi. Ulterior (în 1993), Marc Andreessen a inclus si elementul <IMG>, care permitea si includerea imaginilor în paginile Web. Astazi creatorii de pagini Web sunt din ce în ce

mai dornici de a mari atractivitatea paginilor lor, incluzând variate elemente multimedia : secvente animate, audio, video, applet-un Java etc. Principalul dezavantaj al acestor elemente o reprezinta dimensiunea lor foarte mare. Putini utilizatori sunt dispusi sa astepte mai mult pentru a vizualiza o pagina (de exemplu, sa astepte sa se lanseze in executie Java, doar pentru a vizualiza niste efecte spectaculoase). Din acest motiv, este bine sa utilizati cu precautie aceste elemente (cel putin deocamdata) si în orice caz sa avertizati utilizatorii despre necesitatea de a astepta.

5.1. Elementul OBJECT

W3C propune ca solutie unica de inserare a elementelor multimedia elementul OBJECT. Acest element permite creatorilor de pagini Web sa specifice obiectul pe care doresc sa îl insereze în pagina Web, parametrii necesari pentru initializarea obiectului, precum si aplicatia necesara pentru manipularea obiectului respectiv. În acest caz, obiect este un termen generic, care desemneaza orice tip de date pe care autorii de pagini Web doresc sa le insereze în paginile lor (imagini, secvente sonore, video etc.).

Elementul OBJECT necesita o eticheta de început <OBJECT> si o eticheta de sfârsit </OBJECT>, între care este plasata o descriere a obiectului, si admite urmatoarele atribute principale:

CLASSID = URL

specifica adresa la care se gaseste o implementare a obiectului respectiv.

CODEBASE = URL

specifica adresa de baza, utilizata pentru rezolvarea adreselor URL relative asociate atributelor CLASSID, DATA si ARCHIVE. Implicit adresa de baza este adresa documentului curent.

CODETYPE = tip-continut

specifica tipul codului obiectului ce va fi încarcat (cel specificat de CLASSID). Daca lipseste se utilizeaza tipul specificat de atributul TYPE. Valoarea acestui atribut respecta sintaxa : Content-Type: tip/subtip ; parametri

Tipul poate fi "text", "image", "audio", "video", "application" sau un simbol care reprezinta o extensie de fisier. Extensiile de fisier pot fi specificate printr-un simbol standard (vezi RFC 2048) sau pot formate din caracterele X- sau x-urmate imediat de o extensie.

Subtipul poate fi un simbol corespunzator unei extensii de fisier.

Parametrii se specifica sub forma : atribut = valoare

Exemple:

1. Tipul implicit este :

text/plain charset = "us-ascii"

în acest caz tipul este text, subtipul este plain, parametrul este reprezentat de atributul charset cu valoarea "us-ascii".

2. Pentru a specifica o aplicatie vom utiliza tipul application, urmat de un subtip care sa indice natura aplicatiei - Java-archive : "application/Java-archive"

3. Pentru a specifica o imagine, stocata în format gif, vom utiliza tipul image, cu

subtipul gif - "image/gif"

DATA = URL

specifica adresa la care se gasesc datele obiectului respectiv.

TYPE = tip-continut

specifica tipul datelor specificate de atributul DATA.

ARCHIVE = lista-URL

specifica o lista de adrese, separate prin virgula, la care se gasesc resurse necesare obiectului respectiv.

STANDBY = text

specifica mesajul care va fi vizualizat pe parcursul încarcarii obiectului respectiv.

ALIGN = BOTTOM | MIDDLE | TOP specifica modul de pozitionare a obiectului în raport cu textul din document.

HEIGHT = valoare, specifica înaltimea obiectului.

WIDTH = valoare, specifica înaltimea obiectului.

BORDER = valoare, specifica grosimea liniei chenarului care va fi plasat în jurul obiectului.

HSPACE = valoare

specifica dimensiunea spatiului lasat pe orizontala (la stânga si la dreapta obiectului).

VSPACE = valoare

specifica dimensiunea spatiului lasat pe verticala (la marginile sus-jos ale obiectului).

USEMAP = adresa specifica descrierea hartii grafice a unei imagini.

De exemplu, putem insera imaginea din fisierul Clint.gif, utilizata ca exemplu la elementul IMG si cu ajutorul elementului OBJECT :

Descriere

<OBJECT DATA = "Clint.gif" TYPE = "image/gif"> Clint </OBJECT>

Observatie:

Puteti declara obiecte imbricate. De exemplu:

<OBJECT DATA="Clint.mpeg" TYPE="application/mpeg">

<!-- daca nu, incerc gif-ul! -->

<OBJECT DATA="Clint.gif" TYPE= "image/gif>

<!-daca nu, vizualizez textul ->

Clint </OBJECT> </OBJECT>

Browser-ul va încerca sa vizualizeze primul obiect. În caz de esec, vizualizeaza doar continutul sau. Daca în continutul sau apare un nou element OBJECT, se încearca vizualizarea acestuia etc.