Mapy graficzne są wygodnym i efektownym sposobem tworzenia linków na elementach graficznych jak fotografie czy rysunki. Polega to na zadeklarowaniu obrazka jako mapowanego, a następnie zdefiniowaniu obszarów na których będzie się klikać wraz z odpowiadającytmi im linkami.
Zadeklarowanie obrazka jako mapy wymaga wstawienia do znacznika obrazka atrybutu usemap wraz z odwołaniem się do opisu tzw mapy usemap="#A1".
Opis czyli mapę umieszcza się w dowolnym miejscu dokumentu pomiędzy znacznikami <map> i </map>. Znacznik otwierający zawiera atrybut name o wartości równej wartości atrybutu usemap, ale nie poprzedzony krzyżykiem. Oto znacznik mapowanego obrazka: <img src=mapa.gif usemap="#A1">
Aby zaznaczyć na obrazku miejsca, na których będziemy klikać mamy do dyspozycji trzy typy obszarów: kółko, circle, prostokąt o bokach równoległych do krawędzi ekranu, rect, (skrót od rectangle), oraz wielokąt polygon. Obrazek otwieramy w jakimś znanym nam programie graficznym, gdzie będziemy potrafili zczytać pozycję myszki znajdującej sie w dowolnym punkcie na obrazku. Jeśli nie masz programu graficznego lub nie potrafisz użyć go do zczytania pozycji myszki możesz ściągnąć prosty program tutaj.
Następnie wybieramy miejsca i określamy w jakie typy obszarów zechcemy je zamknąć. Potem sczytujemy współrzędne punktów charakterystycznych naszych obszarów. Dla kółka są to współrzędne jego środka, przy czy musimy jeszcze określić promień.
Dla prostokąta to współrzędne jego przeciwległych wierzchołków, lewego-górnego i prawego-dolnego.
Dla wielokąta to kolejne współrzędne jego wierzchołków sczytywane w kolejności zgodnej ze wskazówkami zegara, począwszyj od punktu wysuniętego najbardzie na lewo i do góry. Wszystkie te dane zapisujemy obok siebie oddzielając je przecinkami i robimy to osobno dla każdego obszaru. Jeśli chcemy, na obrazku możemy zaznaczyć wybrane obszary widoczną linią i zachować kopię obrazka do celów dokumentacji.
Nastepnym krokiem jest kodowanie mapy. W tym celu pomiędzy znaczniki <map> i </map> dla każdego wybranego i zdefiniowanego obszaru wstawiamy znacznik area co oznacza obszar. Znacznik ten posiada atrybut shape co oznacza kształt i atrybut coords, skrót od coordinates co oznacza współrzęne. Następne atrybuty to znane już nam atrybuty href i opcjonalny alt. Kompletnie wypełniona mapa odpowiadająca obrazkowi na tej stronie będzie miała postać:
<img src=mapa.gif usemap="#A1">
<map name="A1">
<area shape="circle" coords="377,117,29" href="australia.htm" alt="Australia z Oceanią">
<area shape="circle" coords="210,17,254,56" href="europa.htm" alt="Europa">
<area shape="circle" coords="214,58,234,57,257,62,277,87,285,86,255, 136,243,135,234,115,232,92,210,92,199,73" alt="Afryka" href="afryka.htm">
</map>
[dalej]