Strona o GIMPie nie jest poradnikiem HTMLa, ale jednak GIMP jako narzędzie do grafiki jest wykorzystywany przez wielu grafików i webmasterów na potrzeby sieciowe. Zresztą nadaje się do tego wyśmienicie.

Jednymi z najistotniejszych elementów każdej strony są hiperłącza do innych stron czy też serwisów. W tym tutorialu interesuje nas jak stworzyć mapę odnośników na pojedynczej grafice.
Są dwa sposoby:
- użyć html'owego taga MAP i określić współrzędne naszych linków na grafice, a następnie przypisać im adres www,
- pokroić taką grafikę na kawałki i dopiero do nich przypisać łącza.

Najpierw zajmiemy się metodą nieingerującą w nasz obrazek.

1a. Otwieramy GIMPa i ładujemy do niego grafikę (już zoptymalizowaną i umieszczoną w naszym serwisie www), która ma być zmapowana. Na potrzeby tego tutoriala przygotowałem gimpowe menu:

2a. Z menu obrazka (przypominam, że dostęp do tego menu mamy klikając prawym klawiszem myszki na obrazku) wybieramy Filters/Web/Image Map..., powinien otworzyć się edytor ImageMap (nie będę wyjasniał wszystkich opcji, bo nie jest to potrzebne, także domyślne preferencje są tak dobrane, że nie trzeba ich zmieniać):

3a. Używając narzędzi po lewej stronie okienka edytora rysujemy obszary, które mają być aktywne:

Gdy chcemy zakończyć rysowanie danego obszaru, klikamy dwukrotnie myszką, wtedy wyskoczy okienko dialogowe, w którym możemy wpisać adres strony, do której ma prowadzić łącze, komentarz do łącza. W zakładce Rectangle możemy poprawić numerycznie wymiary aktywnego obszaru, a w zakładce JavaScript wpisać kod JavaScriptu:

Obszar aktywny może być prostokątem, elipsą a także mieć nieregularne kształty. W każdej chwili możemy przenieść i przeskalować dany obszar wybierając narzędzie strzałki:

4a. Wszystkie adresy i inne dane przypisane do aktywnego obszaru są widoczne po prawej stronie okienka edycyjnego (sekcja Selection). W każdej chwili możemy kliknąć dwukrotnie taki wpis i dokonać poprawek:

5a. Na koniec, przed zamknięciem edytora ImageMap, zapisujemy naszą mapę odnośników do pliku tekstowego, dzięki temu możemy później otworzyć obrazek, wczytać z pliku mapę odnośników i dokonać ewentualnych poprawek czy zmian. Poniżej pokazałem jak wygląda taki plik:

6a. Otwieramy edytor HTML'a i kopiujemy odpowiednie fragmenty kodu z wygenerowanego pliku. Poniżej efekt tego działania:

Drugą metodą tworzenia odnośników na naszym obrazku, jest pocięcie go na fragmenty i poskładanie ich na stronie w tabelce a następnie przypisaniu im odpowiednich URLi. Cięcia obrazków możemy użyć także np. do utrudnienia kopiowania naszych obrazków ze stron www.

1b. Otwieramy nasz obrazek i za pomocą prowadnic ustalamy linie cięcia obrazka (prowadnice otrzymujemy poprzez "wyciąganie" linijki, po prostu klikamy na linijce i naciskamy lewy przycisk myszki a następnie przeciągamy kursor w pożądane miejsce).

W naszym przypadku najpierw pokroję obrazek w poziomie, mając już ustawione prowadnice wybieram z menu obrazka opcję Image/Transforms/Guillotine (obrazek/transformacja/gilotyna):

Otrzymam w efekcie tego działania cztery nowe obrazki:

2b. Obrazek górny, który ma mieć dwa odnośniki dzielę w ten sam sposób co poprzedni, tylko teraz używam pionowej prowadnicy:

3b. W edytorze HTML'a tworzę tabelkę o szerokości pierwotnego obrazka (ważne żeby następujące parametry tabeli miały wartość "0": BORDER, CELLSPACING, CELLPADDING):

Niektórzy twierdzą, że cięcie obrazka przyspiesza załadowanie go na komputer oglądającego, ale ja nie zauważyłem jakiejś znaczącej różnicy w czasach ściągania obu rodzajów obrazków.
Wybór, której metody użyć pozostawiam Wam.