HĂRȚI DE IMAGINI

Crearea hărții de imagini• se adaugă în interiorul tag-ului "<img>" atributul "usemap" a cărui

valoare reprezintă numele hărții, apoi se începe formarea hărții prin elementul:

• <map name="nume_harta"> </map>• - unde pt. "nume_harta" a atributului "name" se folosește același

cuvânt adăugat la "usemap"- în cadrul acestuia se adaugă elemente

• <area atribute>• - acestea definesc zonele hărții imaginii și forma acestora (prin

valorile atributelor),- numărul de elemente "AREA" reprezintă numărul de suprafețe (cu link-uri specifice) în care este "impartita" imaginea.

Exemplu

<img src="poza.jpg" usemap="#map1"> <map name="map1">  <area shape="rect" coords="9, 120, 56, 149" href="url">  <area shape="rect" coords="100, 200, 156, 249" href="url"></map>

Atribute și descriereInstructiune Atribute Descriere

<img atribute >

- marcaj de includere a imaginilor

ismap specifica faptul ca este o harta de imagine pe server (se foloseste mai rar; de obicei folosim harti de imagine la client)

usemap="nume_harta" specifica harta de imagine la client

lowscr = "url" imaginea de rezolutie scazuta care se incarca prima (doar pentru Netscape)

<map atribute >< / map >

- specifica regiunile unei harti de imagine la client

name = "nume_harta" numele hartii de imagine (corespunzator atributului USEMAP al marcajului <IMG>)

<area atribute >

- defineste o regiune a unei harti de imagine

shape = "forma" forma regiunii: rect sau rectangle (dreptunghi), circle sau circ (cerc), point (punct), poly sau polygon (poligon)

coords = "coordonate"

coordonatele unei regiuni (in pixeli); se calculeaza in functie de coltul din stanga sus al imaginii (care are coordonatele (0, 0), adica x = 0, y = 0); variaza in functie de SHAPE = forma regiunii:- pentru rect (dreptunghi) se dau coordonatele celor 4 colturi sau a celor din stg. sus si dr. jos ale regiunii- pentru circ (cerc) se dau coordonatele centrului cercului si raza- pentru point (punct) se dau coordonatele punctului- pentru poly (poligon) se dau coordonatele colturilor poligonului

href = "=url=" URL - ul asociat regiunii specificate din cadrul imaginii; in cazul unui clic pe acea regiune se incarca pagina specificata prin URL

alt = "text" textul asociat regiunii specificate din cadrul imaginii; apare plasand mouse-ul deasupra regiunii respective sau celor cu browserul setat sa nu incarce imagini

Exemplu

• In aceasta imagine avem trei zone distincte: dreptunghi, cerc si romb (poligon); pe care, prin codurile HTML de creare a hartii de imagini, le-am definit sa fie tratate ca zone diferite, separate, si cand dam click pe ele, fiecare deschide cate o pagina diferita (sugerata de numele din zona respectiva).

Cod exemplu<div align="center">

<img src="image_map.gif" alt="Harta de imagini" border="0" width="300" height="300" usemap="#map1">

<map name="map1">  <area      href="dir/contact.php" alt="Date de contact" title="Date de contact"      shape="rect" coords="6,116,97,184">  <area      href="curs.html" alt="Curs HTML" title="Curs HTML"      shape="circle" coords="251,143,47">  <area      href="../index.html" alt="Pagina principala" title="Pagina principala"      shape="poly" coords="150,217, 190,257, 150,297,110,257"></map>

</div>