HTML imagini hărți. Definirea unei imagini harta cu eticheta map. Introducerea Imaginii folosind eticheta img și atributul usemap.

Susține Lectii-Virtuale!

Imagini hărți

Eticheta <map> definește o imagine-hartă. O imagine-hartă este o imagine cu zone cu click.
Faceți click pe computer, pe telefon sau pe ceașca de cafea din imaginea de mai jos:



Exemplu:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Telefon" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cafea" href="coffee.htm">
</map>

Cum functioneazã?

Ideea din spatele unei hărți a imaginii este că ar trebui să puteți efectua diferite acțiuni, în funcție de locul în care faceți click pe imagine.
Pentru a crea o hartă a imaginii aveți nevoie de o imagine și o hartă care conține câteva reguli care descriu zonele pe care se poate face click.

Imaginea

Imaginea este introdusă folosind eticheta <img>. Singura diferență față de alte imagini este că trebuie să adăugați un atribut usemap:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

Valoarea usemap începe cu o etichetă hash tag # urmată de numele hărții imaginii și este utilizată pentru a crea o relație între imagine și harta imaginii.

Notă: Puteți utiliza orice imagine ca hartă a imaginii.

Harta

Apoi adăugați un element <map>.
Elementul <map> este utilizat pentru a crea o hartă a imaginii și este legat de imagine prin utilizarea atributului nume:

<map name="workmap">

Atributul nume trebuie să aibă aceeași valoare ca atributul usemap.

Notă: Puteți introduce elementul <map> oriunde doriți, nu trebuie să fie inserat imediat după imagine.