Sunteți pe pagina 1din 2

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 Atributul ? ? ? poly ? default | circle | poly | default? sunt:

shape precizeaza forma ariei. Valorile posibile rect (forma dreptunghiulara), circle (forma circulara), (un poligon arbitrar cu 3 sau mai multe varfuri), (reprezinta restul imaginii care nu este definita in tag-urile

sau area).

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

</area shape="circle" nohref> <area shape="circle" coords="297,128,30" href="http://www.bacau.net" title="bacau">