Rozdział 16.
Tworzenie i stosowanie
map odsyłaczy
Mapy odsyłaczy są specjalnym rodzajem obrazów czułych na klikanie. Zazwyczaj, gdy
osadzasz obraz wewnątrz połączenia, kliknięcie w jakimkolwiek miejscu obrazu zawsze
prowadzi pod ten sam adres. W przypadku map odsyłaczy, w zależności od obszaru
obrazu, w którym nastąpiło kliknięcie, adres docelowy będzie inny. W tym rozdziale
poznasz mapy odsyłaczy i dowiesz się, jak je tworzyć. Oto szczegółowe tematy.
czym są mapy odsyłaczy,
tworzenie map odsyłaczy działających po stronie serwera,
tworzenie map odsyłaczy działających po stronie klienta,
obsługa obu typów map odsyłaczy.
Czym są mapy odsyłaczy
W rozdziale 7. Wykorzystywanie obrazów, koloru i tła nauczyłeś się tworzyć
obraz spełniający funkcje połączenia poprzez umieszczenie znacznika
znacznika . W ten sposób cały obraz staje się połączeniem. Klikając w obraz,
w obszarze jego obramowania lub tła, uzyskasz ten sam efekt.
W mapach odsyłaczy różne części obrazu aktywują różne połączenia. Stosując takie
obiekty, możesz tworzyć wizualną mapę hiperpołączeń, które prowadzą Cię do stron
przypisanych odpowiednim obszarom (patrz rysunek 16.1). Możesz też stworzyć
wizualną metaforę dla prezentowanych informacji, półkę z książkami lub fotografię, na
której każdej z osób przyporządkowany jest opis.
Mapy odsyłaczy są to specjalne obrazy, podzielone na obszary stowarzyszone z osobnymi
połączeniami. Adres, pod który dotrzesz, klikając taki obraz, zależy od wybranego miejsca.
Istnieją dwa rodzaje map odsyłaczy: działające po stronie serwera oraz działające po
stronie przeglądarki. Mapy odsyłaczy działające po stronie serwera były używane we
wczesnym okresie istnienia WWW, jednak przysparzały pewnych problemów autorom
454 Część 6. Mapy odsyłaczy i formularze
Rysunek 16.1.
washington.html minnesota.html ohio.html
Istota map odsyłaczy
różne miejsca obrazu to
różne połączenia
california.html
alaska.html
texas.html floryda.html
stron WWW. Zagadnienia te przedstawię w dalszej części tego rozdziału. Aktualnie
znacznie częściej są wykorzystywane mapy odsyłaczy działające po stronie
przeglądarki. Wykazują one wiele zalet w porównaniu ze starszymi mapami odsyłaczy
działającymi po stronie serwera.
Mapy odsyłaczy działające po stronie serwera są implementowane za pomocą obrazu
wyświetlanego przez klienta, natomiast program działa na serwerze.
Mapy odsyłaczy działające po stronie klienta pracują w ten sam sposób co poprzednia
wersja. Różnica polega jedynie na tym, że nie ma w tym wypadku programu
działającego na serwerze. Obróbka współrzędnych i kojarzenie adresów odbywa się w
przeglądarce.
Choć mapy odsyłaczy działające po stronie serwera nie są już wykorzystywane tak
często jak niegdyś, to jednak poznanie zasad działania i sposobów używania obu typów
map odsyłaczy może dać duże korzyści. Jeśli chcesz zapewnić zgodność witryny
z wcześniejszym typem map odsyłaczy, to będziesz musiał poznać metody
wykorzystania map obu typów. Wszystkie konieczne informacje znajdziesz w tym
rozdziale.
Mapy odsyłaczy działające po stronie serwera
Gdy mapy odsyłaczy pojawiły się na WWW, były tworzone przy użyciu specjalnych
programów działających na serwerach. Mapy tego typu nazywane są mapami odsyłaczy
działającymi na serwerze.
Rozdział 16. Tworzenie i stosowanie map odsyłaczy 455
Gdy przeglądarka aktywuje połączenie na mapach odsyłaczy, wywoływany jest spe-
cjalny program przechowywany na serwerze WWW. Przeglądarka przekazuje mu
współrzędne x oraz y miejsca obrazu, w którym użytkownik kliknął. Program obsługi
map odsyłaczy wyszukuje specjalny plik definicji map, który dopasowuje obszary obra-
zu do adresów URL, wykonuje pewne obliczenia, aby określić, którą ze stron załado-
wać. Następnie ją ładuje.
Mapy odsyłaczy działające po stronie serwera były jedną z najwcześniejszych opcji sie-
ciowych i są obsługiwane przez większość graficznych przeglądarek, o ile nie przez
wszystkie. Mapy tego typu nastręczają jednak pewnych problemów, które przedstawi-
łam poniżej:
zazwyczaj, gdy przesuwasz wskaznik myszy nad połączeniem, adres URL,
do którego prowadzi połączenie, jest wyświetlany na pasku stanu okna przeglądarki.
Ponieważ jednak przeglądarka WWW nie ma pojęcia, gdzie prowadzą poszczególne
części map odsyłaczy, to, umieszczając wskaznik myszy nad obrazem, zobaczysz
albo URL samego programu obsługującego mapy odsyłaczy (co nie jest bardzo
pomocne), albo ten sam URL i współrzędne x i y (równie mało pomocne);
nie możesz używać ani testować takich map odsyłaczy z wykorzystaniem plików
lokalnych. Mapy odsyłaczy wymagają kontaktu z serwerem, by uruchomić program
obsługi i przeprowadzić analizę współrzędnych x i y;
Ponieważ każde kliknięcie w obrębie map odsyłaczy wymaga uruchomienia przez
serwer specjalnego programu, są one znacznie wolniejsze niż zwykłe połączenia
klasyczne czy też w postaci obrazów. W konsekwencji, jeśli prośba o nową stronę
jest realizowana za pośrednictwem map odsyłaczy, będzie to trwało wieki.
Mapy odsyłaczy działające po stronie klienta
Chociaż mapy odsyłaczy działające po stronie serwera są powszechnie używane od
dłuższego już czasu, problemy z nimi związane doprowadziły do stworzenia nowego
typu map odsyłaczy są to mapy odsyłaczy działające po stronie klienta. Mapy odsy-
łaczy działające po stronie przeglądarki eliminują wszelkie problemy występujące przy
wykorzystaniu map odsyłaczy działających po stronie serwera, gdyż w ich przypadku
nie ma potrzeby korzystania z programu do obsługi map działającego na serwerze. Prze-
twarzanie map jest w całości wykonywane lokalnie w samej przeglądarce. W rezultacie
przeważająca ilość projektantów witryn WWW korzysta dziś właśnie z tego rodzaju
map odsyłaczy.
Mapy odsyłaczy działające po stronie przeglądarki są obecnie obsługiwane przez najnowsze
wersje przeglądarek sieciowych, w tym Netscape (2.0 i wersje nowsze) oraz Internet Explorer
(3.0 i wersje pózniejsze). Propozycja takiego rozwiązania została zawarta w specyfikacji
HTML 3.2 oraz 4.0.
456 Część 6. Mapy odsyłaczy i formularze
Mapy odsyłaczy a przeglądarki tekstowe
Ze względu na swoją naturę, mapy odsyłaczy mogą działać wyłącznie w przeglądarkach
graficznych. W rzeczywistości, gdy próbujesz oglądać dokument zawierający takie obiekty
w przeglądarce tekstowej, takiej jak, na przykład, Lynx, nie pojawi się nawet ślad ist-
nienia obrazu, chyba że do obrazu dołączony jest atrybut ALT. Ale nawet wówczas nie
będziesz mógł wykorzystać obrazu do nawigacji. Jeśli decydujesz się na umieszczenie
map odsyłaczy w swoich dokumentach, jest niezwykle istotne, abyś utworzył także tek-
stowy ekwiwalent obrazu, wówczas czytelnicy posługujący się przeglądarkami teksto-
wymi będą mogli korzystać z Twojej strony. Zastosowanie map odsyłaczy ograniczy
możliwości tych użytkowników, bądz więc miłosierny i pozwól im przynajmniej poo-
glądać zawartość strony.
Tworzenie map odsyłaczy działających
po stronie serwera
Choć mapy odsyłaczy działające po stronie serwera mają swoje wady, wciąż jednak
warto znać sposoby ich wykorzystania. Niestety, serwery WWW w różny sposób two-
rzą mapy odsyłaczy, co sprawia, że wyjaśnienie sposobów ich tworzenia przysparza
pewnych trudności. Nawet w przypadku tej samej platformy mogą być stosowane inne
metody. I tak serwery: W3C CERN i HTTPD NCSA stosują odmienne metody imple-
mentacji plików. Identyczne są natomiast elementy składowe map odsyłaczy:
specjalny kod HTML wskazujący, że obraz jest mapą,
plik definicji mapy umieszczony na serwerze, który zawiera przyporządkowanie
obszarów obrazu odpowiednim połączeniom do stron WWW,
skrypt CGI łączący wszystko w jedną całość.
Ten podrozdział wyjaśnia ogólne zasady konstrukcji map odsyłaczy, ale przykłady
zostały przygotowane z myślą o takich serwerach, jak NCSA i Apache. Jeśli
w przypadku Twojego serwera konieczne są dodatkowe informacje, spójrz do jego
dokumentacji lub zwróć się do administratora.
Wybór obrazu
Aby utworzyć mapy odsyłaczy, potrzebny Ci będzie obraz (to oczywiste). Obraz, który
ma być zastosowany do przygotowania mapy powinien zawierać odrębne wizualnie ob-
szary, aby można było łatwo je wybierać. Takie wymagania spełniają obrazy zawierają-
ce fragmenty symboliczne lub dające się łatwo podzielić na wielokąty. Dość trudno
tworzy się mapy odsyłaczy w oparciu o fotografie, bowiem ich elementy mają tendencję
do zlewania się ze sobą lub też mają nietypowe kształty. Rysunki 16.2 i 16.3 pokazują
przykłady odpowiednich i nieodpowiednich na mapy obrazów.
Rozdział 16. Tworzenie i stosowanie map odsyłaczy 457
Definiowanie koordynat
Sercem działających po stronie serwera map odsyłaczy jest plik zawierający definicję
mapy. Stworzenie tego pliku wymaga nakreślenia na obrazie obszarów, w których bę-
dzie można klikać, określenia współrzędnych definiujących te obszary i wybrania stron
HTML, do których prowadzić będą połączenia.
Rysunek 16.2.
punkt Obszar wieloboczny
Ten obraz
nadaje się na mapy
Obszar
o kształcie koła
Obszar prostokątny
Rysunek 16.3.
Piękny obrazek,
ale nie nadaje się
na mapy odsyłaczy
Format pliku zawierającego definicje mapy zależy od programu obsługi map odsyłaczy
działającej na serwerze. W tym rozdziale omawiać będę serwer NCSA HTTPD i jego
domyślny plik definicji mapy. Jeżeli korzystasz z innego serwera, możesz mieć do dyspozycji
kilka programów obsługi map odsyłaczy oferujących różne formaty. W takiej sytuacji zawsze
458 Część 6. Mapy odsyłaczy i formularze
możesz zwrócić się do administratora sieci o pomoc lub wybrać sam, po uważnym
przeczytaniu dokumentacji.
Tworzenie pliku mapy możesz rozpocząć od ręcznego naszkicowania obszarów i zano-
towania ich współrzędnych. Dostępne są także programy do przygotowywania map od-
syłaczy. Zastosowanie takiego programu ułatwi Ci życie, bowiem generuje on plik defi-
nicji mapy automatycznie, za podstawę biorąc obszary nakreślone za pomocą myszy.
Programy Mapedit dla systemu Windows oraz WebMap dla komputerów Macintosh
pomogą Ci w tworzeniu plików definicji mapy w formacie NCSA. Jeśli korzystasz
z systemu Unix, to będziesz mógł skopiować odpowiednią wersję programu Mapedit
z serwera FTP. (Pełną listę adresów serwerów FTP zawierających zasoby związane
z tworzeniem map odsyłaczy i nie tyko, znajdziesz w dodatku A, pt.: Inne zródła in-
formacji ). Wiele z najnowszych WYSIWIG edytorów stron WWW również umożliwia
generowanie map odsyłaczy.
W tabeli 16.1 przedstawiona jest lista dostępnych obecnie narzędzi przeznaczonych do
generowania map odsyłaczy.
Tabela 16.1.
Oprogramowanie wspomagające tworzenie map odsyłaczy
Nazwa Platforma URL
Web HotSpots Windows http://www.1automata.com/hotspots/index.html
Imaptool Linux/ X-Windows http://www.sspitzer.org/imaptool/
LiveImage Windows http://www.mediatec.com
Mapedit Windows/Unix http://www.boutell.com/mapedit
Poor Person s X-Window http://www.pangloss.com/seidel/ClrHlpr/imagemap.html
Image Mapper
Za pomocą tych programów możesz konwertować współrzędne do formatu właściwego
dla Twojego serwera.
Jeśli jesteś zmuszony ręcznie przygotowywać pliki zawierające definicję mapy, w tym
miejscu znajdziesz odpowiedni przepis. Najpierw zrób szkic obszarów, które chcesz
uaktywnić w swoim obrazie. Rysunek 16.4 przedstawia trzy typy obszarów, które moż-
na definiować w mapach odsyłaczy: koło, prostokąt oraz wielobok.
punkt Obszar wieloboczny
Rysunek 16.4.
Szkicowanie obszarów
Obszar
o kształcie koła
Obszar prostokątny
Rozdział 16. Tworzenie i stosowanie map odsyłaczy 459
W kolejnym kroku musisz określić współrzędne krańcowych punktów tych obszarów.
Ten proces jest taki sam, niezależnie od tego czy tworzysz mapę odsyłaczy działającą
po stronie serwera, czy po stronie przeglądarki. Większość programów do edycji obra-
zów wyświetla współrzędne wskaznika myszy skorzystaj z tej opcji i zanotuj odpo-
wiednie współrzędne (wspomniane wyżej programy zrobią to za Ciebie, ale samodziel-
ne wykonanie tych operacji pomoże Ci zrozumieć cały proces).
Definiowanie obszarów wielobocznych
Na rysunku 16.5 zostały przedstawione współrzędne obszaru wielobocznego. Wartości
te liczone są względem lewego, górnego wierzchołka obrazu, który ma współrzędne
(0,0). Pierwsza liczba w każdej parze oznacza współrzędną x i definiuje ilość pikseli od
lewej krawędzi obrazu. Druga liczba oznacza współrzędną y i definiuje ilość pikseli od
górnej krawędzi obrazu.
(0,0) (229,66) (276,19) (332,19)
Rysunek 16.5.
Określanie
współrzędnych
obszaru wielobocznego
(263,94 (332,94
460 Część 6. Mapy odsyłaczy i formularze
Początek układu współrzędnych, czyli punkt (0,0), znajduje się w lewym, górnym
wierzchołku obrazu, a wartości współrzędnych y rosną ku dołowi.
Definiowanie obszaru w kształcie koła
Rysunek 16.6 przedstawia sposób określania współrzędnych obszaru w kształcie koła.
W tym przypadku należy zapisać współrzędne środka koła oraz długość jego promienia,
wyrażoną w pikselach. Środek koła jest określany jako para współrzędnych (x,y) liczo-
nych względem lewego, górnego wierzchołka obrazu.
Rysunek 16.6. Środek
Określanie
współrzędnych obszaru o
kształcie koła
Promień koła = 66 pikseli
Rozdział 16. Tworzenie i stosowanie map odsyłaczy 461
Definiowanie obszaru prostokątnego
Rysunek 16.7 pokazuje, jak określić współrzędne obszaru prostokątnego. W tym przy-
padku należy zanotować współrzędne (x,y) lewego górnego oraz prawego dolnego
wierzchołka prostokąta.
(0,0) Lewy, górny (342,19)
Rysunek 16.7.
Określanie
współrzędnych obszaru
prostokątnego
Prawy, dolny (440,318)
462 Część 6. Mapy odsyłaczy i formularze
Definiowanie punktu
Starsze przeglądarki dają także możliwość definiowania punktów na mapie odnośni-
ków. Jeśli podczas kliknięcia wskaznik myszy nie znajdzie się w zakresie działania
żadnego ze zdefiniowanych obszarów, to zostanie uaktywniony najbliżej położony
punkt. Punkty są przydatne w przypadku fotografii i innych obrazów, których elementy
zlewają się ze sobą. Wprowadzają one pewną ziarnistość, dzięki której użytkownik nie
musi klikać w dokładnie wyznaczonych rejonach. W przypadku definiowania punktów
wystarczy zanotować parę współrzędnych (x,y) liczonych względem lewego, górnego
wierzchołka obrazu.
Tworzenie i zapisywanie pliku mapy odsyłaczy
Kiedy już zaznaczysz współrzędne obszarów na obrazie, który będzie mapą odsyłaczy,
to wykonałeś połowę pracy. Następnym etapem jest przyporządkowanie obszarom lub
punktom adresów URL, odpowiadających połączeniom. Ten sam adres może wskazy-
wać wiele obszarów, ale każdy obszar może mieć tylko jedno połączenie.
Mając obszary, współrzędne i adresy URL, możesz przystąpić do napisania definicji
mapy przeznaczonej dla Twojego serwera. Plik definicji dla serwera NCSA HTTPD
wygląda w ten sposób:
default URL
circle URL x,y promień
rect URL x,y x,y
poly URL x1,y1 x2,y2 ... xN,yN
point URL x,y
Pliki definicji mapy dla programu obsługującego na Twoim serwerze mapy odsyłaczy
mogą wyglądać inaczej, ale podstawowe elementy są takie same. Dla każdej z kolej-
nych pozycji x i y podstaw wartości zanotowanych uprzednio współrzędnych. Zauważ,
że promien (w wierszu circle) jest promieniem obszaru o kształcie koła.
Porządek obszarów w pliku jest istotny, wyższa pozycja obszaru oznacza pierwszeń-
stwo w przejmowaniu kliknięć. Jeśli obszary pokrywają się, kliknięcie w miejscu po-
krywania spowoduje aktywację obszaru wcześniej wymienianego w pliku.
Definicja mapy zawiera także obszar domyślny nie ma on współrzędnych i jest po
prostu adresem URL. Wykorzystywany jest, gdy kliknięcia wypadają poza wyspecyfi-
kowanymi obszarami. Stanowi pokrycie dla reszty obrazu, z którą nie jest powiązane
żadne połączenie (jeśli korzystasz z serwera NCSA HTTPD i umieszczasz w pliku defini-
cji mapy default, nie powinieneś korzystać z punktów; ich obecność wyklucza de-
fault).
Jeśli chciałbyś wykorzystać współrzędne podane na rysunkach 16.5 do 16.7 i zapisać je
w pliku mapy dla serwera NCSA HTTPD, to mógłby on przybrać następującą postać:
poly http://serwer.pl/witryna/muzyka.html 229,66 276,19 332,19 333,94
263,94
circle http://serwer.pl/witryna/linki.html 121,79 66
Rozdział 16. Tworzenie i stosowanie map odsyłaczy 463
rect http://serwer.pl/witryna/dosciagniecia.html 342,19 440,318
Niezależnie od formatu pliku, podawane adresy URL muszą być albo pełnymi adresami
(rozpoczynającymi się od http, ftp lub nazwy innego protokołu), albo pełnymi ścież-
kami dostępu do plików, do których się odwołujesz, w tym wypadku podajesz wszyst-
ko, co znajduje się w adresie za nazwą komputera. Nie wolno stosować w plikach defi-
nicji ścieżek relatywnych.
Oto przykład pliku definicji mapy dla serwera NCSA HTTPD:
circle /www/mapping.html 10,15 20
circle /www/mapping.html 346,23 59
poly /www/test/orange.html 192,3 192,170 115,217
rect /www/pencil.html 57,57 100,210
point /www/pencil.html 100,100
point /www/orange.html 200,200
Tworzenie pliku definicji mapy jest najtrudniejszą częścią tworzenia mapy odsyłaczy.
Gdy już to zrobisz, będziesz musiał zainstalować ten plik na serwerze. Zapisując plik
definicji mapy odsyłaczy, warto nadać mu opisową nazwę, na przykład, mojama-
pa.map. Miejsce, w którym zapiszesz te pliki nie ma większego znaczenia, ja osobiście
lubię umieszczać je w jednym miejscu, w centralnym katalogu maps, na najwyższym
poziomie udostępnianej przez sieć struktury katalogów.
Instalowanie programu obsługi map odsyłaczy
Oprócz pliku definicji mapy, o którym pisałam przed chwilą, będziesz musiał zainsta-
lować także specjalny program służący do obsługi map. Programy tego typu są zazwy-
czaj umieszczane w katalogu o nazwie cgi-bin, odpowiednio skonfigurowanym w celu
przechowywania programów i skryptów na serwerze. Większość serwerów domyślnie
zaopatrzona jest w program obsługi map odsyłaczy i jeśli korzystasz z takiego, którym
nie administrujesz, będziesz prawdopodobnie miał możliwość użycia takiego programu.
Zazwyczaj występuje on pod nazwą htimage lub imagemap.
Bądz ostrożny, korzystając z programu imagemap dla serwera NCSA. Starsze wersje tego
programu były trudne w obsłudze i wymagały dodatkowego pliku konfiguracyjnego. W
wersji 1.5 serwera program działa znacznie lepiej. Jeśli nie korzystasz z najnowszej wersji
serwera, nową wersję programu możesz znalezć pod adresem:
http://hoohoo.ncsa.uiuc.edu/docs/tutorials/imagemap.txt.
Aączenie wszystkiego razem
A zatem masz już obraz, plik definicji mapy opisujący obszary, w jakie można klikać,
ich miejsca docelowe oraz program obsługi map odsyłaczy. Teraz powinieneś połączyć
ze sobą wszystkie te elementy.
W kodzie HTML strony, która zawiera mapy odsyłaczy, musisz umieścić znaczniki
i
wano program dla serwera NCSA:
464 Część 6. Mapy odsyłaczy i formularze
Przeanalizuj to połączenie. Po pierwsze, połączenie do skryptu map odsyłaczy (moja-
mapa) wskazywane jest w sposób, którego mógłbyś się spodziewać, ale zaraz za nim
pojawia się ścieżka dostępu do pliku definicji mapy. Ścieżka ta powinna mieć pełną po-
stać, rozpoczyając się od Twojego głównego katalogu WWW (podajesz wszystko, co
występuje w adresie URL po nazwie komputera), w tym przypadku jest to /maps/moja-
mapa.map. Ta dziwaczna forma adresu zostanie wyjaśniona w rozdziale 19., w którym
zajmiemy się skryptami CGI.
W drugim wierszu kodu HTML, w znaczniku
prosty atrybut nie posiadający wartości, który informuje przeglądarkę, by przekazywała
współrzędne poszczególnych kliknięć programowi obsługi map odsyłaczy na serwerze.
Mając wszystkie trzy elementy map odsyłaczy działających po stronie serwera plik
definicji mapy, program obsługi map odsyłaczy i specjalny kod HTML możesz wy-
próbować swoje mapy odsyłaczy. Po załadowaniu zawierającego je pliku HTML do
przeglądarki, możesz udawać się do różnych miejsc na serwerze i wybierać różne frag-
menty mapy.
Jeśli działasz na serwerze NCSA HTTPD i nie masz najnowszej wersji programu imagemap,
gdy klikniesz na swoich mapach odsyłaczy, wyświetlony zostanie błąd Cannot Open
Configuration file (nie mogę otworzyć pliku konfiguracyjnego). W takim przypadku
skontaktuj się z administratorem.
Ćwiczenie 16.1: Mapa odsyłaczy w formie szafy grającej
Mapy odsyłaczy mogą być dosyć niebezpieczne. Jeśli ich obszary nie zostaną rozmiesz-
czone w poprawny sposób, a wszystkie dodatkowe narzędzia nie będą poprawnie zain-
stalowane, to wykorzystanie map odsyłaczy może być powodem występowania licz-
nych błędów. W tym przykładzie użyjesz obrazu (patrz rysunek 16.8) i na jego pod-
stawie stworzysz plik mapy odsyłaczy, wykorzystując format pliku map odsyłaczy ser-
wera NCSA. Dzięki temu będziesz się mógł przekonać, jak wyglądają pliki map odsy-
łaczy i jak należy je tworzyć.
Rysunek 16.8.
Obraz szafy grającej
W pierwszej kolejności należy zdefiniować obszary obrazu, w które użytkownik będzie
Rozdział 16. Tworzenie i stosowanie map odsyłaczy 465
mógł klikać. Zapewne zauważyłeś, że na obrazie znajduje się sześć prostokątnych
przycisków z nazwami rodzajów muzyki, obszar centralny przypominający kształtem
domek (który doskonale się nadaje do stworzenia obszaru wielobocznego) oraz wyświe-
tlone z boku koło ze znakiem zapytania. Na rysunku 16.9 przedstawione zostały przy-
kłady typów regionów, których utworzenie jest najbardziej logiczne.
Rysunek 16.9.
Szafa grająca
ze zdefiniowanymi
obszarami.
Okrąg
Prostokąt Wielobok Prostokąt
Teraz, kiedy już wiesz, w jakich miejscach obrazu powinny się znalezć poszczególne
obszary, będziesz musiał określić ich dokładne współrzędne. Możesz to zrobić ręcznie
lub posłużyć się specjalnym programem do tworzenia map odsyłaczy, takim jak Mape-
dit lub WebMap (to rozwiązanie jest bardzo zalecane). Jeśli chcesz spróbować określać
współrzędne obszarów ręcznie, także możesz wykorzystać programy do edycji map od-
syłaczy, gdyż większość z nich podczas przesuwania wskaznika myszy po obrazie wy-
świetla współrzędne jego położenia.
PhotoImpact 6.0, o którym wspominałam w rozdziale 9. Tworzenie animowanych
obrazów , wyświetla położenie wskaznika myszy na pasku stanu, w lewym dolnym
wierzchołku okna programu. Program ten został także wyposażony w narzędzie uła-
twiające tworzenie map odsyłaczy. Wystarczy, że użyjesz odpowiedniego narzędzia
wyboru: Rectangle, Circle lub Polygon, aby oznaczyć prostokątny, okrągły lub wielo-
boczny obszar, który chcesz zdefiniować. Następnie wybierz opcję Web/mage Map,
a będziesz mógł zdobyć informacje o współrzędnych obszaru, określić skojarzony z nim
adres URL oraz wybrać typ mapy odsyłaczy, którą chcesz stworzyć. Program PhotoIm-
pact wyświetla poprawny kod map odsyłaczy serwerów NCSA oraz CERN, jak również
map obsługiwanych po stronie przeglądarki. Okno dialogowe narzędzia ułatwiającego
tworzenie map odsyłaczy zostało przedstawione na rysunku 16.10.
466 Część 6. Mapy odsyłaczy i formularze
Rysunek 16.10.
Okno dialogowe
Image Map Tag
programu
PhotoImpact 4.0.
Czy potrzebujesz programu graficznego? Oto sztuczka, którą możesz zastosować, jeśli
używasz przeglądarki Netscape Navigator. Utwórz dokument HTML zawierający obraz
umieszczony wewnątrz połączenia wskazującego na nieistniejący plik, a wewnątrz
znacznika
łączenia, możesz stworzyć dowolne, nawet takie, które nie będzie działać. Kod HTML
tego połączenia może, przykładowo, wyglądać w następujący sposób:
Jeśli teraz wyświetlisz ten dokument HTML w przeglądarce, to obraz zostanie wyświetlony
jako mapa odsyłaczy i podczas przesuwania po nim wskaznika myszy, na pasku stanu
przeglądarki będą wyświetlane współrzędne położenia tego wskaznika. Używając tej
sztuczki, możesz określić współrzędne dowolnego punktu obrazu i wykorzystać je przy
tworzeniu pliku mapy odsyłaczy.
Dysponujesz już listą współrzędnych, będą Ci jeszcze potrzebne jedynie adresy stron
WWW, do których użytkownik zostanie przeniesiony po kliknięciu odpowiedniego ob-
szaru. Mogą to być adresy dowolnych dokumentów lub skryptów, dowolne adresy, któ-
rych możesz użyć w przeglądarce. W tym przykładzie, stworzysz kilka dokumentów
i zapiszesz je w katalogu muzyka serwera WWW. Są to strony, których następnie uży-
jesz jako punktów docelowych obszarów zdefiniowanych na mapie odsyłaczy. Na ry-
sunku 16.11 przedstawiłam każdy z ośmiu obszarów mapy odsyłaczy. W tabeli 16.2 zo-
stały podane typy, współrzędne oraz adresy stron, które przeglądarka wyświetli po
kliknięciu każdego z obszarów mapy.
Rysunek 16.11.
Osiem obszarów mapy
ponumerowanych
zgodnie z zawartością
tabeli 16.2
1 5
2 8
3 4 7 6
Rozdział 16. Tworzenie i stosowanie map odsyłaczy 467
Teraz stwórz element pliku mapy dla prostokątnego obszaru Klasyka, podając w nim
współrzędne obszaru oraz dokument, jaki ma zostać wyświetlony po jego kliknięciu.
W przypadku pliku mapy serwera NCSA informacje te mają następującą postać:
rect /muzyka/klasyka.html 101,113,165,134
Zwróć uwagę, iż adresy podawane w pliku mapy muszą być ścieżkami bezwzględnymi,
rozpoczynającymi się od głównego poziomu witryny (a nie od głównego katalogu sys-
temu plików). Nie mogą to być adresy względne, określane na podstawie położenia pli-
ku mapy odsyłaczy mapy odsyłaczy nie działają w ten sposób. W tym przypadku ka-
talog muzyka znajduje się na głównym poziomie witryny WWW, a plik klasyka.html
jest umieszczony w tym katalogu, a zatem adres, jaki będzie można umieścić w pliku
mapy odsyłaczy ma postać /muzyka/klasyka.html.
Tabela 16.2.
Obszary wyróżnione na obrazie przedstawiającym szafę graficzną
Numer Typ URL Współrzędne
Rect
1 muzyka/klasyka.html 101,113 165,134
Rect
2 muzyka/country.html 101,139 165,159
rect
3 muzyka/rockpop.html 101,163 165,183
poly
4 Muzyka/glowna.html 175,152 203,118
220,118 247,152
237,153 237,181
186,181 186,153
rect
5 Muzyka/swing.html 259,113 323,134
rect
6 Muzyka/jazz.html 259,139 323,159
rect
7 Muzyka/gospel.html 259,163 323,183
circle
8 Muzyka/pomoc.html 379,152 21
Teraz będziesz mógł stworzyć identyczne elementy dla pozostałych obszarów mapy
(Country, Rock/Pop, Home, Swing, Jazz, Gospel i Help). Nie zapomnij umieścić w pli-
ku mapy elementu default, obsługującego wszystkie miejsca mapy leżące poza zdefi-
niowanymi obszarami (w naszym przypadku spowoduje to wyświetlenie strony nota-
spot.html). Po zakończeniu pracy, plik mapy odsyłaczy powinien mieć następującą postać:
default /muzyka/notaspot.html
rect /muzyka/klasyka.html 101,113 165,134
rect /muzyka/country.html 101,139 165,159
rect /muzyka/rockpop.html 101,163 165,183
poly /muzyka/glowna.html 175,152 203,118 220,118 247,152 237,153
237,181 186,181 186,153
rect /muzyka/swing.html 259,113 323,134
rect /muzyka/jazz.html 259,139 323,159
rect /muzyka/gospel.html 259,163 323,183
circle /muzyka/pomoc.html 379,152 21
Zapisz plik mapy pod nazwą jukebox.map i umieść w katalogu serwera służącego do
przechowywania map lub do dowolnego innego katalogu, w którym przechowujesz ma-
468 Część 6. Mapy odsyłaczy i formularze
py odsyłaczy. Ostatnim zadaniem będzie stworzenie strony WWW zawierającej obraz
szafy grającej, znacznik
cym do obsługi map odsyłaczy. Poniższy przykład demonstruje sposób wykorzystania
programu do obsługi map odsyłaczy na moim serwerze:
I to wszystko! Teraz, gdy wszystkie elementy mapy zostały stworzone i podłączone, klik-
nięcie jakiegoś punktu obrazu powinno spowodować wyświetlenie odpowiedniej strony.
Kompletna strona WWW została przedstawiona na rysunku 16.12. Zwróć uwagę, iż po-
niżej mapy odnośników zostały umieszczone połączenia tekstowe, przeznaczone dla
osób, które będą oglądały stronę, korzystając z przeglądarki tekstowej lub które w swoich
przeglądarkach wyłączą wyświetlanie obrazów. Oto kompletny kod strony:
"http://www.w3.org/TR/xhtml1/DTD/transitional.dtd">
Superstrona muzyczna
Wybierz gatunek muzyki, której chcesz posłuchać.
W przeglądarce pojawi się lista piosenek, które możesz wybrać.
Strona główna |
Klasyka |
Country |
Rock/Pop |
Swing |
Jazz |
Gospel |
Pomoc
Rozdział 16. Tworzenie i stosowanie map odsyłaczy 469
Rysunek 16.12.
Końcowa wersja strony
muzycznej zawierająca
mapę odsyłaczy
obsługiwaną
po stronie serwera
Tworzenie map odsyłaczy
obsługiwanych po stronie przeglądarki
Teraz, gdy już znasz starszy sposób tworzenia map odsyłaczy, nadszedł czas, aby
przedstawić nowy. Jak już wcześniej wspominałam, mapy odsyłaczy działające po stro-
nie przeglądarki mają kilka zalet i usprawnień w porównaniu z mapami odsyłaczy dzia-
łającymi po stronie serwera. Podstawową zaletą i ułatwieniem jest fakt, iż nie trzeba już
umieszczać na serwerze specjalnego programu służącego do obsługi map. Nowoczesne
przeglądarki obsługują mapy odsyłaczy lokalnie, na komputerach użytkowników.
W procesie tworzenia map odsyłaczy działających po stronie klienta etap znajdowania
współrzędnych każdego z obszarów jest dokładnie taki sam, jak w poprzednim przy-
padku. Jednakże współrzędne i odwołania do plików stanowią w tym wypadku inte-
gralną część dokumentu HTML, a nie osobny plik.
Znaczniki