Tytuł: Zastosowanie opcji Image Map Wiadomość wysłana przez: Joten8 on 04.01.2009, 21:00:08 Zastosowanie opcji Image Map Tutorial Opracowanie: Joten8 Poziom trudności: średni PRZYKŁADOWY EFEKT KOŃCOWY (http://www.gimpimagemaptut.yoyo.pl/) 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ć. [lp] Zaczynamy [lp] 1. Uruchamiamy GIMP-a i otwieramy nasz szablon lub dowolny obrazek. Do tego tutoriala wykorzystałem obrazek menu.png: (http://www.gimpimagemaptut.yoyo.pl/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. (http://www.gimpuj.info/gallery/13078_26_12_08_2_04_34_0.PNG) [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: (http://www.gimpuj.info/gallery/13078_26_12_08_2_04_34_1.PNG) [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. (http://www.gimpuj.info/gallery/13078_04_01_09_3_27_24.PNG) [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: Kod: <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. [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. Tytuł: Odp: Zastosowanie opcji Image Map Wiadomość wysłana przez: niclas4 on 30.07.2009, 08:16:50 Na tej przykładowej stronie jest wirus :)
Tytuł: Odp: Zastosowanie opcji Image Map Wiadomość wysłana przez: wiciu2.0 on 06.08.2009, 20:22:37 a dokładniej koń trojański: HTML:IFrame-GA [Trj]
Tytuł: Odp: Zastosowanie opcji Image Map Wiadomość wysłana przez: vibix on 20.01.2010, 11:01:51 to jest super ;)
Wielkie dzieki moja praca http://bestwarez.megabyet.net/ Tytuł: Odp: Zastosowanie opcji Image Map Wiadomość wysłana przez: dawka005 on 28.05.2010, 18:09:00 dobrze podałes jak mozna to wrzucic na strone www a jak wrzucic to na forum??
Tytuł: Odp: Zastosowanie opcji Image Map Wiadomość wysłana przez: fenix505 on 28.05.2010, 18:15:38 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ć) Tytuł: Odp: Zastosowanie opcji Image Map Wiadomość wysłana przez: dawka005 on 28.05.2010, 18:42:34 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?? Tytuł: Odp: Zastosowanie opcji Image Map Wiadomość wysłana przez: fenix505 on 29.05.2010, 14:50:03 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 Tytuł: Odp: Zastosowanie opcji Image Map Wiadomość wysłana przez: JacobDonut on 09.09.2010, 12:09:10 Tutorial bardzo się przydał, a opcja jest niesamowicie przydatna. Niestety nie mam jak podzielić się moją pracą, ponieważ nie mam odpowiedniego serwera. :/
Tytuł: Odp: Zastosowanie opcji Image Map Wiadomość wysłana przez: Nelgor on 10.09.2010, 13:04:35 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. Tytuł: Odp: Zastosowanie opcji Image Map Wiadomość wysłana przez: JacobDonut on 10.09.2010, 15:05:22 Do tego nie trzeba serwera... 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ć. :) Tytuł: Odp: Zastosowanie opcji Image Map Wiadomość wysłana przez: Żaba on 03.09.2011, 15:40:39 Daj tu blondynce internet... Ja mam taką wątpliwość, czy można to
Kod: <img src="menu.png" width="420" height="300" border="0" usemap="#map" /> wkleić do dokumentu css? Żeby działało<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> Tytuł: Odp: Zastosowanie opcji Image Map Wiadomość wysłana przez: Terrqge on 03.09.2011, 16:50:08 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.
Tytuł: Odp: Zastosowanie opcji Image Map Wiadomość wysłana przez: Sooly on 03.09.2011, 16:56:33 Tak, wkleja się to do pliku html. Z resztą nawet w tutorialu autor napisał dla mniej zaawansowanych:
Cytuj 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. Tytuł: Odp: Zastosowanie opcji Image Map Wiadomość wysłana przez: Żaba on 04.09.2011, 14:25:43 Ok dzięki za pomoc.
ps. I sory za odgrzebywanie wątku |