Po dodaniu łącza do obrazu w języku Hypertext Markup Language (HTML), łącze to jest dodawane do całego obrazu. Może to stanowić problem, jeśli programista chce stworzyć pojedynczy obraz z kilkoma obszarami lub przyciskami, a każdy obszar jest używany dla innego łącza. Mapa obrazu HTML pozwala programiście określić pewne obszary, do których trafi łącze, umożliwiając mu osadzenie kilku łączy w jednym obrazie. Odbywa się to poprzez określenie kształtu łącza i poinformowanie HTML, jakie współrzędne mają być użyte dla łącza.
Obrazy używane w Internecie są mierzone w pikselach. Wiedza o tym, ile pikseli znajduje się na obrazie, jest pierwszym niezbędnym krokiem do stworzenia mapy obrazu. Na przykład używany jest prostokątny obraz o wysokości 400 pikseli i szerokości 250 pikseli. Następnie programista musi wiedzieć, jak dokładnie zmierzyć kształt we współrzędnych, aby mapa obrazu HTML działała poprawnie.
Lewy górny róg nazywa się 0,0 w przypadku korzystania z mapy obrazu HTML. W tym przypadku prawy dolny róg to 250,400 10. Pomiarów dokonuje się najpierw na szerokość, a następnie na wysokość. Prostym sposobem na myślenie o tym jest to, że pierwszy pomiar mówi HTML, jak daleko w prawo ma się oddalić od lewej krawędzi, a drugi to, ile pikseli ma jeszcze przejść. Jeśli programista chce, aby punkt na mapie znajdował się 50 pikseli od lewej krawędzi i 10,50 pikseli w dół, współrzędne wyniosłyby XNUMX.
Istnieją trzy różne kształty, które programista może wywołać dla mapy obrazu HTML: prostokąt, okrąg i wielokąt. „Rect” oznacza prostokąt, a programista musi najpierw wpisać współrzędne dla lewego górnego rogu, a następnie prawego dolnego. Okrąg określa się, wpisując współrzędne początku okręgu, a następnie promień okręgu. Wielokąt jest tworzony przez wpisanie wszystkich pięciu współrzędnych, od góry do prawej.
Kodowanie mapy obrazu HTML wygląda następująco:
Każda mapa obrazu HTML musi mieć nazwę, a sekcja „url.html” jest łączem, do którego ta sekcja mapy obrazu poprowadzi użytkownika po jej kliknięciu. Gdy obrazek zostanie umieszczony na stronie z kodem HTML, programista musi napisać: usemap=”test.” To powie obrazowi, jakiej mapy obrazu HTML użyć.