Proste mapowanie obrazu – poradnik

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:

p1

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!

p2

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.

p3

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ę!

p4

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!

img





Ten post ma jeden komentarz

  1. Przemek

    Dzięki! Takich informacji szukałem. Dobrze się czyta.

Dodaj komentarz