Când un link este adăugat la o imagine în Hypertext Markup Language (HTML), acel link este adăugat la întreaga imagine. Aceasta poate fi o problemă dacă programatorul dorește să facă o singură imagine cu mai multe zone sau butoane și fiecare zonă este folosită pentru o legătură diferită. O hartă a imaginii HTML permite programatorului să specifice anumite zone în care va merge linkul, permițându-i să încorporeze mai multe legături într-o singură imagine. Acest lucru se face prin specificarea unei forme pentru link și spunând codului HTML ce coordonate vor fi folosite pentru link.
Imaginile folosite pentru Internet sunt măsurate în pixeli. A ști câți pixeli sunt în imagine este primul pas esențial pentru crearea unei hărți imagine. De exemplu, se folosește o imagine dreptunghiulară care are o înălțime de 400 de pixeli și o lățime de 250 de pixeli. Apoi, programatorul trebuie să știe cum să măsoare cu precizie forma în coordonate pentru ca harta de imagini HTML să funcționeze corect.
Colțul din stânga sus se numește 0,0 când utilizați o hartă de imagine HTML. Colțul din dreapta jos în acest caz ar fi 250,400. Măsurătorile se fac mai întâi cu lățimea, apoi cu înălțimea. O modalitate ușoară de a te gândi la asta este că prima măsurătoare îi spune HTML cât de departe la dreapta să meargă de la marginea stângă, iar a doua este cât de mulți pixeli trebuie să meargă. Dacă programatorul dorește ca un punct de pe hartă să fie la 10 pixeli de la marginea stângă și la 50 de pixeli în jos, coordonatele ar fi 10,50.
Există trei forme diferite pe care programatorul le poate invoca pentru o hartă de imagine HTML: rect, cerc și poligon. „Rect” înseamnă dreptunghi, iar programatorul trebuie să introducă mai întâi coordonatele pentru colțul din stânga sus și apoi din dreapta jos. Un cerc este specificat tastând coordonatele unde începe cercul și apoi raza cercului. Un poligon este creat prin tastarea tuturor celor cinci coordonate, de sus la dreapta.
Codarea hărții imaginilor HTML merge astfel:
Fiecare hartă de imagine HTML trebuie să aibă un nume, iar secțiunea „url.html” este linkul la care acea secțiune a hărții de imagine va conduce utilizatorul atunci când acesta face clic pe ea. Când imaginea este plasată pe site cu HTML, programatorul trebuie să scrie: usemap=”test.” Aceasta va spune imaginii ce hartă a imaginii HTML să folosească.