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:

<img src="imagini/relief.jpg" width="298"

height="225" border="0" usemap="#forme">

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></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>
</map>

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...">
</map>

Deci, fiecare mapare a unei imagini are un nume (name) si contine mai multe tag-uri area. Tag-urile
area au urmatoarele atribute:

shape=”rect | circle | poly | default”

Atributul shape precizeaza forma ariei. Valorile posibile sunt:

• rect (forma dreptunghiulara),
• circle (forma circulara),
• poly (un poligon arbitrar cu 3 sau mai multe varfuri), sau
• default (reprezinta restul imaginii care nu este definita in 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 <a
href=”...”> 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:

<img src="imagini/relief.jpg" width="298"

height="225" border="0" usemap="forme.map">
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 <a href=”...”>, specificand scriptul server-side spre care vor fi trimise coordonatele
(x,y):

<a href="formemap.cgi">
<img src="imagini/relief.jpg" width="298"
height="225" border="0" ismap>
</a>

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 <input
type=”image” ... > in tag-ul form.

<form action="formemap.cgi">
<input type="image" name="relief_imagine"
src="imagini/relief.jpg" width="298"
height="225" border="0">
</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 <a href=”...”> care sa contina imaginea:

<a href="#"><img src="imagini/relief.jpg" width="298"

height="225" border="0" ismap></a>
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.