`<map> și <area>` în HTML

Creează o hartă de imagine: zone dreptunghiulare, circulare sau poligonale dintr-o imagine devin linkuri separate.

Sintaxă tag

<img src="harta.png" usemap="#judete" alt="Harta">
<map name="judete">
  <area shape="rect" coords="10,10,120,80" href="/iasi/" alt="Iași">
</map>

Ce face `<map> și <area>`

Elementul <map> definește o hartă de imagine, iar fiecare <area> din el descrie o zonă clicabilă. Imaginea se leagă de hartă prin atributul usemap="#nume", care trebuie să corespundă cu name de pe <map>.

Forma zonei se alege cu shape (rect, circle, poly sau default), iar poziția cu coords, în pixeli, față de colțul din stânga sus al imaginii. <area> este un element gol și, când are href, trebuie să aibă și alt.

Coordonatele nu se scalează când imaginea este micșorată din CSS. Pe un site responsive, zonele se decalează; acolo un SVG cu linkuri este, de obicei, o soluție mai bună.

Atribute

Atribut	Descriere
`name`	Pe `<map>`: numele hărții, folosit în `usemap="#nume"` pe imagine.
`shape`	`rect` (dreptunghi), `circle` (cerc), `poly` (poligon) sau `default` (restul imaginii).
`coords`	`rect`: x1,y1,x2,y2; `circle`: x,y,raza; `poly`: x1,y1,x2,y2,… în pixeli.
`href`	Adresa linkului zonei. Fără `href`, zona nu este un link.
`alt`	Textul alternativ al zonei; obligatoriu când există `href`.

Exemple

Exemplul 1: Harta unui campus cu trei clădiri clicabile

Fiecare zonă duce la pagina clădirii. Imaginea are 600 × 300 px, iar coordonatele sunt în aceste dimensiuni.

<img src="campus.png" width="600" height="300" usemap="#campus" alt="Harta campusului din Iași">
<map name="campus">
  <area shape="rect" coords="20,40,200,160" href="/corp-a/" alt="Corpul A – Rectorat">
  <area shape="circle" coords="320,150,60" href="/biblioteca/" alt="Biblioteca">
  <area shape="poly" coords="430,40,580,60,560,250,440,230" href="/camine/" alt="Căminele">
</map>

Ce afișează browserul

Imaginea campusului. Cursorul devine mânuță deasupra celor trei zone; clic pe cerc deschide /biblioteca/.

Exemplul 2: Zona `default` pentru restul imaginii

Clic oriunde în afara zonelor definite duce la pagina generală.

<map name="campus">
  <area shape="rect" coords="20,40,200,160" href="/corp-a/" alt="Corpul A">
  <area shape="default" href="/campus/" alt="Toate clădirile">
</map>

Ce afișează browserul

Clic pe Corpul A deschide /corp-a/; clic în altă parte a imaginii deschide /campus/.

Greșeli frecvente

Scrierea usemap="campus" fără #: legătura cu harta nu se face.
Zone fără alt: cititoarele de ecran nu pot spune unde duce linkul.
Imaginea scalată din CSS (de exemplu width: 100%): coordonatele rămân în pixelii inițiali și zonele nu mai cad pe clădiri.

Comenzi înrudite

<img>: Inserează o imagine în pagină; element vid cu atribute obligatorii src (calea) și alt (textul alternativ).
<a>: Creează un hyperlink către o altă pagină web, un fișier, o adresă de email, un număr de telefon sau o ancoră din pagină.
<figure> și <figcaption>: Grupează o imagine, o diagramă sau un bloc de cod împreună cu legenda sa explicativă (figcaption).

Ce face <map> și <area>