Jak utworzyć mapę obrazu HTML?

Kiedy link zostanie dodany do obrazu w języku HTML (Hypertext Markup Language), ten link zostanie dodany do całego obrazu. Może to stanowić problem, jeśli programista chce utworzyć 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 prowadzi link, umożliwiając mu osadzenie kilku linków w jednym obrazie. Odbywa się to poprzez określenie kształtu linku i podanie HTMLowi, jakie współrzędne mają zostać użyte dla linku.

Obrazy używane w Internecie są mierzone w pikselach. Wiedza o liczbie pikseli 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 nosi nazwę 0,0, gdy używana jest mapa obrazu HTML. Prawy dolny róg w tym przypadku wynosiłby 250,400. Pomiary są wykonywane najpierw na szerokości, a następnie na wysokości. Łatwym sposobem na wymyślenie tego jest to, że pierwszy pomiar mówi HTMLowi, jak daleko w prawo ma iść od lewej krawędzi, a drugi mówi, jak powiedzieć, ile pikseli do przejścia. Jeśli programista chce, aby punkt na mapie znajdował się 10 pikseli od lewej krawędzi i 50 pikseli w dół, współrzędne wynoszą 10,50.

Istnieją trzy różne kształty, które programista może wywoływać dla mapy obrazu HTML: prostokąt, okrąg i wielokąt. „Rect” oznacza prostokąt, a programista musi najpierw wpisać współrzędne lewego górnego rogu, a następnie prawego dolnego rogu. Okrąg określa się, wpisując współrzędne, od których zaczyna się okrąg, a następnie promień okręgu. Wielokąt jest tworzony przez wpisanie wszystkich pięciu współrzędnych, od góry do prawej.

Kodowanie map obrazów HTML wygląda następująco:
<map name = "test">
<area href = "url.html" shape = rect coords = "10,50,20,60">
<area href = "url.html" shape = circle coords = "10,50,4">
<area href = "url.html" shape = wielokąt coords = "10,50,12,55,15,60,13,65,85,55">

Każda mapa obrazu HTML musi mieć nazwę, a sekcja „url.html” jest linkiem, w którym ta sekcja mapy obrazu poprowadzi użytkownika, gdy ją kliknie. Gdy obraz zostanie umieszczony na stronie z HTML, programista musi napisać: usemap = "test." To powie obrazowi, jakiej mapy obrazu HTML użyć.