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