Polskie Forum Użytkowników GIMP-a

---

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ć.

---

[lp] Zaczynamy

[lp] 1. Uruchamiamy GIMP-a i otwieramy nasz szablon lub dowolny obrazek. Do tego tutoriala wykorzystałem obrazek menu.png:



[lp] 2. Figury odpowiednio podpisałem, aby wiadomo było jakie strony są naszym celem. Kolejno:
http://gry-online.pl/ (http://gry-online.pl/),
http://filmweb.pl/ (http://filmweb.pl/),
http://wikipedia.org/ (http://wikipedia.org/).

[lp] 3. Wybieramy: Filtry -> Sieć WWW -> Image Map.



[lp] 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:



[lp] 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 (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.

[lp] 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.

[lp] 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 (http://filmweb.pl).

[lp] 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.



[lp] 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 (http://wikipedia.org).

[lp] 10. Zapisujemy jako plik .map. Jego kod (można go otworzyć notatnikiem lub bardziej zaawansowanymi programami, np. Notepad++) wygląda tak jak poniżej:


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.

[lp] 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.

---

Na tej przykładowej stronie jest wirus :)

a dokładniej koń trojański: HTML:IFrame-GA [Trj]

to jest super  ;)
Wielkie dzieki
moja praca http://bestwarez.megabyet.net/

dobrze podałes jak mozna to wrzucic na strone www a jak wrzucic to na forum??

nieda sie  :D
to jest HTML.
Można by było ale jak na tym forum byłoby możliwe umieszczanie znaczników HTML w postach. Wtedy by się dało. (Na niektórych tak jest, wystarczy w opcjach zmienić, nie robią tego bo można dzięki temu zmodifikować stronę np.zrobić przekierowanie na jakieś porno ;D albo jakieś wkurzające reklamy lub wirusa wkleić)

a ne ma jakiegos generatora??
mi chodzi zeby to było w url(BBCode) a nie w html tak sie da napewno bo juz tak widzialem ale jak to zrobic??

nie da się (moge się mylić)
Tak jak napisałem u góry czytaj dalej.
W HTML na forum sie da.
nie rozumiem o co ci chodzi z tym generatorem  :D

Tutorial bardzo się przydał, a opcja jest niesamowicie przydatna. Niestety nie mam jak podzielić się moją pracą, ponieważ nie mam odpowiedniego serwera. :/

Do tego nie trzeba serwera...
Ja dałem obrazek ja Imageshack a kod do stopki forum. I działa ładnie.
Oczywiście zamiast stopki można użyć każde pole czytające HTML.

Ale jak zrobiśz takie coś z tą funkcją Image Map, to potem to trzeba dodać do treści pliku html. A potem gdzieś trzeba ten plik html umieścić. :)

Daj tu blondynce internet... Ja mam taką wątpliwość, czy można to
wkleić do dokumentu css? Żeby działało

Do css na pewno nie. Jak już to html, ale nie mam pojęcia czy to będzie działać. Struktura jest html więc do żadnych css nie wklejaj.

Tak, wkleja się to do pliku html. Z resztą nawet w tutorialu autor napisał dla mniej zaawansowanych:

Ok dzięki za pomoc.
ps. I sory za odgrzebywanie wątku