Zastosowanie opcji Image Map
Tutorial
Opracowanie: Joten8
Poziom trudności: średni
Kliknij na powyższy napis, aby przejść na stronę,
na której zastosowałem przedstawioną tu opcję Image Map
Do napisania tego tutoriala zainspirowało mnie zadawane przez wszystkich pytanie - przy tworzeniu layoutów - "Czym to pociąć?". Otóż chciałbym pokazać, że nasz szablon nie musi być cięty, a w szczególnych wypadkach może być jednym wielkim obrazkiem, dzięki zastosowaniu znanej niektórym opcji
Image Map.
Tutorial napisany w wersji GIMP 2.4. W innych wersjach nazwy narzędzi i pojęć mogą się różnić.
Zaczynamy 1. Uruchamiamy GIMP-a i otwieramy nasz szablon lub dowolny obrazek. Do tego tutoriala wykorzystałem obrazek
menu.png:
2. Figury odpowiednio podpisałem, aby wiadomo było jakie strony są naszym celem. Kolejno:
http://gry-online.pl/,
http://filmweb.pl/,
http://wikipedia.org/.
3. Wybieramy:
Filtry -> Sieć WWW -> Image Map.
4. Zajmijmy się najpierw prostokątem. Wybieramy ikonę lupy z plusikiem [
Zoom In], aby powiększyć obrazek, co ułatwi nam zaznaczenie. Wybieramy ikonę niebieskiego prostokąta [
Define Rectangle area]. Klikamy na dwa przeciwległe (po skosie) wierzchołki naszego (w moim wypadku czerwonego) prostokąta, tworząc zaznaczenie. Otworzy nam się okienko:
5. Mamy do wyboru 3 zakładki:
- pierwsza -
Odnośnik - możemy określić m.in. typ odnośnika (w moim wypadku "Witryna WWW"), adres URL (ja wpisuję
http://gry-online.pl) i tekst alternatywny jeśli ktoś chce;
- druga - w tym wypadku nazywa się ona
Prostokąt - możemy zmieniać współrzędne i wymiary obszaru, więc dobrze by było zaznaczyć opcję
Podgląd;
- trzecia -
JavaScript - dla bardziej zaawansowanych, pozwala dopisać m.in. skrypt onMouseover lub onMouseout.
6. Przejdźmy do koła. Cały krok jest bardzo podobny do tego z zaznaczaniem prostokąta. Możemy znowu powiększyć obrazek. Wybieramy ikonę niebieskiego koła [Define Circle/Oval area]. Klikamy na środek naszego (w moim wypadku niebieskiego) koła i na jego krawędź, tworząc zaznaczenie.
7. Oczywiście zaznaczenie nie wyjdzie nam idealnie, więc będziemy musieli je poprawić. W otwartym okienku przejdźmy do drugiej zakładki, która teraz nazywa się
Okrąg. Najpierw zaznaczmy opcję
Podgląd, aby na bieżąco w tle widzieć efekt naszych modyfikacji. Zaznaczenie przesuwamy zmieniając wartość
X środka i
Y środka. Wielkość koła zmieniamy za pomocą wartości
Promień. Jeszcze tylko dodajemy adres w pierwszej zakładce, czyli
http://filmweb.pl.
8. Pozostaje nam wielokąt. Tutaj sprawa jest podobna do zaznaczania prostokąta z tym, że klikamy po kolei na wszystkie wierzchołki aż do ostatniego, na którym klikamy dwa razy. W okienku edycji nic się nie zmienia z wyjątkiem drugiej zakładki, która przyjęła nazwę
Wielokąt.
9. Na liście obok mamy wypisane wszystkie punkty wraz z współrzędnymi. Po zaznaczeniu możemy edytować współrzędne za pomocą wartości
x i
y. Warto mieć zaznaczoną opcję
Podgląd. Przycisk
Wstaw dodaje wierzchołek pomiędzy zaznaczonym a tym u góry. Przycisk
Dołącz dodaje wierzchołek pomiędzy tym zaznaczonym a tym na dole. W pierwszej zakładce wpisuję adres:
http://wikipedia.org.
10. Zapisujemy jako plik
.map. Jego kod (można go otworzyć notatnikiem lub bardziej zaawansowanymi programami, np.
Notepad++) wygląda tak jak poniżej:
<img src="menu.png" width="420" height="300" border="0" usemap="#map" />
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Użytkownik -->
<area shape="rect" coords="25,33,191,125" href="http://gry-online.pl" />
<area shape="circle" coords="321,103,68" href="http://filmweb.pl" />
<area shape="poly" coords="119,141,135,180,45,174,99,242,120,220,208,259,345,249,334,201,208,213,140,197,183,153,120,141" href="http://wikipedia.org" />
</map>
Kopiujemy ten kod do kodu źródłowego strony w miejscu gdzie znajdować się ma obrazek
menu.png. Możemy ewentualnie zmienić adresy stron i ścieżkę obrazka.
Koniec
Zastosowanie opcji Image Map jest przydatne dla tych, którzy tworzą strony WWW z całych gotowych layoutów. Możliwe jest eksperymentowanie z grafikami i tworzenie np. interaktywnych map, zwiedzanego domu czy też swojej domowej strony w postaci biurka/tablicy z pinezkami.
Miłego GIMP-owania.
