Witamy, Gość. Zaloguj się lub zarejestruj.
Czy dotarł do Ciebie email aktywacyjny?


Zaloguj się podając nazwę użytkownika, hasło i długość sesji

Strony: [1] 2  Wszystkie
DrukujPobierz PDF
Autor Wątek: Zastosowanie opcji Image Map  (Przeczytany 43760 razy)
0 użytkowników i 1 Gość przegląda ten wątek.
Joten8
Użytkownik

Reputacja: 1 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6 + GAP
Licencja: CC-NC-BY-SA
Wiadomości: 184
Galeria Użytkownika

Joten8

Nie ma mnie... Przerzucam się na PS'a.


Zobacz profil
« : 04.01.2009, 22:00:08 »

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



Lime Point Zaczynamy

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



Lime Point 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/.

Lime Point 3. Wybieramy: Filtry -> Sieć WWW -> Image Map.



Lime Point 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:



Lime Point 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.

Lime Point 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.

Lime Point 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.

Lime Point 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.



Lime Point 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.

Lime Point 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.

Lime Point 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.


« Ostatnia zmiana: 06.06.2009, 11:58:15 wysłane przez Domaxi » Zapisane

Nie ma mnie... Przerzucam się na PS'a.
niclas4
Nowicjusz

Reputacja: 0 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
Licencja: Copyright
Wiadomości: 8
Galeria Użytkownika



Zobacz profil WWW
« Odpowiedz #1 : 30.07.2009, 09:16:50 »

Na tej przykładowej stronie jest wirus Uśmiech
Zapisane


wiciu2.0
Nowicjusz

Reputacja: 2 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6 + GAP
Licencja: CC-BY
Wiadomości: 13
Galeria Użytkownika



Zobacz profil WWW
« Odpowiedz #2 : 06.08.2009, 21:22:37 »

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

wiciu2.0


Zapraszam na: www.rzeszowcs.pl
vibix
Nowicjusz

Reputacja: 0 Offline Offline

Wiadomości: 1
Galeria Użytkownika

vibix


Zobacz profil
« Odpowiedz #3 : 20.01.2010, 12:01:51 »

to jest super  Mrugnięcie
Wielkie dzieki
moja praca http://bestwarez.megabyet.net/
Zapisane
dawka005
Nowicjusz

Reputacja: 0 Offline Offline

Wiadomości: 2
Galeria Użytkownika

dawka005


Zobacz profil
« Odpowiedz #4 : 28.05.2010, 19:09:00 »

dobrze podałes jak mozna to wrzucic na strone www a jak wrzucic to na forum??
Zapisane
fenix505
Pod nadzorem

Reputacja: -3 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
Licencja: CC-BY
Wiadomości: 115
Galeria Użytkownika


It's me ;D


Zobacz profil
« Odpowiedz #5 : 28.05.2010, 19:15:38 »

nieda sie  Chichot
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 Duży uśmiech albo jakieś wkurzające reklamy lub wirusa wkleić)
Zapisane

dawka005
Nowicjusz

Reputacja: 0 Offline Offline

Wiadomości: 2
Galeria Użytkownika

dawka005


Zobacz profil
« Odpowiedz #6 : 28.05.2010, 19: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??
« Ostatnia zmiana: 29.05.2010, 10:17:54 wysłane przez Ziomioslaw » Zapisane
fenix505
Pod nadzorem

Reputacja: -3 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
Licencja: CC-BY
Wiadomości: 115
Galeria Użytkownika


It's me ;D


Zobacz profil
« Odpowiedz #7 : 29.05.2010, 15: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  Chichot
Zapisane

JacobDonut
Użytkownik

Reputacja: 0 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
Licencja: CC-NC-BY-SA
Wiadomości: 178
Galeria Użytkownika


Oh Yeah!


Zobacz profil WWW
« Odpowiedz #8 : 09.09.2010, 13:09:10 »

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

Reputacja: 0 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6 + GAP
JID: nelgor@aqq.eu
Licencja: Copyright
Wiadomości: 60
Galeria Użytkownika



Zobacz profil WWW
« Odpowiedz #9 : 10.09.2010, 14: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.
Zapisane

Rozpiska autorskiego świata fantasy:
Religia 5%, kultura 0%, geografia 5%, historia 10%.
JacobDonut
Użytkownik

Reputacja: 0 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
Licencja: CC-NC-BY-SA
Wiadomości: 178
Galeria Użytkownika


Oh Yeah!


Zobacz profil WWW
« Odpowiedz #10 : 10.09.2010, 16: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ć. Uśmiech
Zapisane
Żaba
Użytkownik

Reputacja: 5 Offline Offline

Płeć: Kobieta
GIMP: 2.8
Licencja: CC-BY-SA
Wiadomości: 209
Galeria Użytkownika

Żaba


Zobacz profil
« Odpowiedz #11 : 03.09.2011, 16: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" />

<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>
wkleić do dokumentu css? Żeby działało
Zapisane

~Żaba

Cytat: Hasia
-Siema. Jak zrobić kanapkę z pomidorem? -Bierzesz chleb, kroisz, smarujesz masłem, kroisz pomidora i kładziesz na chlebie. -Dzięki, a jak zrobić kanapkę z ogórkiem?
Terrqge
Emeryt

Reputacja: 17 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6
Licencja: Copyright
Wiadomości: 1 353
Galeria Użytkownika



Zobacz profil
« Odpowiedz #12 : 03.09.2011, 17: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.
Zapisane

Sooly
Emeryt

Reputacja: 9 Offline Offline

Płeć: Mężczyzna
GIMP: 2.6 + GAP
Licencja: CC-NC-BY-SA
Wiadomości: 1 840
Galeria Użytkownika



Zobacz profil WWW
« Odpowiedz #13 : 03.09.2011, 17: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.
Zapisane

Strony: [1] 2  Wszystkie
DrukujPobierz PDF
Polskie Forum Użytkowników GIMP-aTutorialeTutorialeGIMPWWWWątek: Zastosowanie opcji Image Map
Skocz do: