Hărți de imagini

În HTML putem folosi elementul <MAP> pentru a crea zone

active pe o imagine
Pentru o hartă imagine veți insera mai întâi în pagina Web o
imagine cu:
<IMG src=”harta.jpg” usemap=”#nume_harta”>
Apoi veți crea zone active cu :
<MAP name=”nume_harta”>
<AREA shape=”rect”|”circle”|”poly” href=”doc”
coords=”descriere_coordonate_zona” alt=”text”>
...</MAP>
Pentru fiecare zonă activă veți folosi un element AREA
Descrirea elementului AREA

Atributul Shape descrie tipul regiunii

- pentru rect coords=”x1,y1,x2,y2” – coordonatele a 2 colțuri opuse
- pentru circle coords=”xc,yc,R” – coordonatele centrului și raza
- pentru poly coords=”x1,y1,x2,y2,x3,y3,...,xn,yn” o succesiune de
perechi de coordonate reprezentând vârfurile poligonului

Prin atributul href se precizează numele documentului deschis la click

Exemplu:
<IMG src=”milkyway.jpg” usemap=”#harta”>
<MAP name=”harta”>
<AREA shape=”circle” coords=”100,80,20” href=”earth.html”>
<AREA shape=”circle” coords=”120,80,20” href=”venus.html”>
</MAP>
 Exercițiu
 Folosiți resursele primite pentru a realiza o hartă de
imagini folosind o poză cu calea lactee și planetele
Sistemului solar
 Fiecare planetă va avea o zonă activă
 Sub hartă veți pune un iframe în care se vor deschide
paginile corespunzătoare planetelor
 Formatați margini, background folosind elemente CSS
 Creați o galerie de imagini folosind un JavaScript din
resurse(spacegallery). Personalizați folosind imagini
sugestive