Mapowanie obrazu to bardzo ciekawa rzecz w kontekście tworzenia stron internetowych. Pozwala to sprawić, że grafiki na naszej stronie będą w pewien sposób interaktywne. Za pomocą kilku linijek kodu możemy sprawić, że obrazek na naszej stronie zostanie sporą mapą odsyłaczy, bądź odnośników do funkcji. Jedyne czego potrzebujemy to przygotowanej grafiki
w odpowiednim rozmiarze (to bardzo ważne) i darmowego programu do obróbki grafiki – GIMPa. Oczywiście, tradycjonaliści mogą sobie odczytywać współrzędne z Painta, ale przyznajcie – komu by się chciało.
Więc przechodząc już do rzeczy, przygotowujemy sobie grafikę i otwieramy GIMPa. Ładujemy nasz obraz i wchodzimy w zakładkę:
Filtry -> Strony WWW -> Mapa obrazu. W tym momencie nasz interfejs wygląda tak:

Do wyboru mamy 3 kształty – prostokąt, koło, wielokąt. Do prostszych projektów można używać pierwszych dwóch, lecz gdy chcemy, by nasze odnośniki miały dokładne kształty zalecam użyć wielokątów. A więc bierzemy się do zaznaczania!

Po zakończeniu zaznaczania możemy wybrać do czego dany obszar będzie się odnosił – jak widać jest wiele opcji – w tym przypadku wybieram stronę WWW. To samo powtarzamy przy kolejnych figurach.

Po wszystkim klikamy: Plik -> Zapisz jako… i zapisujemy jako plik z rozszerzeniem
*.map. Otwieramy plik w edytorze tekstu i voila – mamy gotowy kod na stronę!

Noo… prawie gotowy, musimy zmienić źródło obrazu z „[img] (zaimportowany]” na faktyczną ścieżkę do obrazu. I pamiętajmy – wartość po
usemap i
map name musi być taka sama!
PS. W trzecim obszarze nie ma odnośnika do strony, bo znajdzie się takowy do funkcji JS – zresztą sprawdźcie sami niżej!