Maparea Imaginilor

Maparea imaginilor

Maparea

imaginilor

In acest tutorial vei invata cum sa realizezi maparea unei imagini in HTML, client-side, cat si maparea server-side. Prin mapare, in cadrul unei imagini dintr-o pagina web pot fi definite mai multe contururi speciale, cu cate un link asociat. Aceasta inseamna ca in loc sa ai toata imaginea ca un singur link, poti defini mai multe

linkuri

in

cadrul

aceleiasi

imagini.

Ca exemplu, imaginea de mai jos contine 3 asemenea contururi, care vor afisa diferite mesaje JavaScript atunci cand dai click pe ele.

Atributul

"usemap"

Pentru maparea unei imagini trebuie sa adaugi atributul usemap in tag-ul img. In exemplul de mai sus, maparea imaginii este denumita forme, deci tag-ul img va arata in felul urmator:

Poti

observa

ca

atributul

usemap="#forme"

asigura

maparea

imaginii.

Tag-ul "map" Urmatorul pas pentru maparea imaginii este definirea unei harti. Astfel ii putem transmite browserului care

sunt

zonele

(contururile)

speciale

si

ce

link

corespunde

fiecaruia.

Harta este definita de tag-urile <map>. Pentru exemplul de mai sus, tag-ul map arata in felul urmator:

<map name="forme"> <area shape="circle" coords="187,114,50" href="javascript:clicked_on('Cerc');" title="Cerc"> <area shape="rect" coords="30,22,121,100" href="javascript:clicked_on('Dreptunghi');" title="Dreptunghi"> <area shape="polygon" coords="83,125,132,201,31,201" href="javascript:clicked_on('Triunghi');" title="Triunghi"> <area shape="default" nohref> Poti vedea ca am definit 3 contururi – un cerc, un dreptunghi si un poligon – ce delimiteaza arii si ca aceste arii au fost corelate cu o functie JavaScript care afiseaza denumirile lor corespunzatoare. In acest exemplu, tag-ul map este plasat in fisierul HTML dupa tag-ul img. In realitate, el poate aparea oriunde in sectiunea body. In general, sintaxa pentru tag-ul map este:

<map name="nume"> <area shape="forma ariei" coords="coordonatele ariei" href="hyperlink-ul ariei" sau nohref target="hyperlink target" title="titlul ariei"> <area shape="forma ariei..."> Deci, fiecare mapare a unei imagini are un nume (name) si contine mai multe tag-uri area. Tag-urile area

au

shape=”rect Atributul • • •

poly

•

default

| shape

(un

urmatoarele circle

precizeaza rect

| forma

circle poligon arbitrar

(reprezinta

restul

imaginii

cu care

atribute:

poly

ariei. (forma

Valorile

(forma sau mai

3 nu

este

|

posibile sunt: dreptunghiulara),

multe

definita

default”

in

circulara), varfuri), sau tag-urile

area).

coords="coordonate" Acest atribut precizeaza coordonatele care definesc colturile ariei. Coordonatele depind de forma ariei specificata prin atributul shape.

Forma

Coordonate

Dreptunghi

coords="x1,y1,x2,y2" (Colturile din stanga sus si dreapta jos ale dreptunghiului)

Cerc

coords="x,y,r" (Centrul si raza cercului)

Poligon

coords="x1,y1,x2,y2,x3,y3,..." (Varfurile poligonului)

Poti observa ca toata valorile coordonatelor sunt relative la coltul din stanga sus al imaginii. Cu alte cuvinte,

coltul

din

stanga

sus

are

intotdeauna

coordonatele

(0,0).

Pentru un tag area ce are atributul shape=”default”, nu trebuie sa precizezi coordonatele.

href="hyperlink-ul ariei" Acesta este URL-ul spre care ati dori sa redirectati zonele definite, el functionand la fel ca un tag

standard.

In plus, in loc de acesta poti specifica un atribut nohref daca vrei ca un contur sa nu aiba link.

target="hyperlink target" Cu target poti preciza fereastra unde vrei sa se deschida pagina care reprezinta linkul ariei respective. Si acesta functioneaza ca atributul target dintr-un tag standard.

title="titlul ariei" Acest atribut iti permite sa denumesti aria respectiva. Cand mouse-ul se afla deasupra acestei arii, browserul va afisa acest titlu. Plasarea maparii imaginii intr-un fisier separat Numele maparii imaginii specificat prin atributul usemap este de fapt un URI (Unique Resource Identifier), ceea ce inseamna ca se poate referi la o „harta” aflata in alt fisier de pe site. De exemplu, daca ai salvat tag-ul map intr-un fisier denumit forme.map din acelasi director cu fisierul HTML, acest tag va fi accesat folosind:



Maparea

imaginilor

server-side

Ca o alternativa la definirea maparii in HTML ce poate fi citita de catre un browser, poti folosi maparea server-side. Cu acest tip de mapare, browser-ul trimite coordonatele (x,y) ale punctului pe care ai dat click

la

un

script

server-side

(cum

ar

fi

CGI).

Pentru a realiza o mapare server-side, trebuie doar sa incluzi atributul ismap si sa incadrezi imaginea intr-un tag , specificand scriptul server-side spre care vor fi trimise coordonatele (x,y):

Cand vei da click pe imagine, browser-ul va trimite coordonatele (x,y) ale punctului respectiv la scriptul server-side „formemap.cgi”, care va interpreta valorile x si y, actionand corespunzator. Ca observatie, in cazul de mai sus coordonatele sunt transmise ca parametri la sfarsitul caii URL. De exemplu, daca vrei sa dai posibilitatea utilizatorului de a-si alege o tara dintr-o harta a lumii, poti utiliza scriptul server-side pentru a calcula pe ce tara a fost dat click, afisand informatiile destre tara respectiva. Un alt mod de a crea o mapare server-side este prin includerea unui element de tip in tag-ul form.

In acest caz, coordonatele (x,y) sunt considerate campuri ale tag-ului form, cu denumirea numele_campului.x si numele_campului.y. Deci in exemplul de mai sus, coordonatele vor fi continute

in

campurile

relief_imagine.x

si

relief_imagine.y.

Este bine sa utilizezi maparea server-side atunci cand maparea presupune mai multe zone, sau cand aceste zone nu sunt simplu definite prin forme simple cum ar fi cercuri, dreptunghiuri sau poligoane. Trucuri

pentru

a

stabili

coordonatele

maparii

Daca folosesti un editor de pagini cum ar fi Macromedia Dreamweaver, poti realiza maparea desenand direct pe imagine si lasand editorul sa stabileasca coordonatele. Daca realizezi pagina fara ajutorul unui editor, o modalitate simpla de a stabili coordonatele este sa schimbi maparea de la client-side la server-side inlocuind atributul usemap="numemap" cu ismap, si adaugand un tag care sa contina imaginea:



O alta metoda ar fi deschiderea imaginii intr-un editor grafic cum ar fi Adobe Photoshop. Cand vei muta mouse-ul deasupra imaginii, vei putea vedea coordonatele punctului respectiv.