Tag: Grafika

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!