Mapy odsyłaczy


Mapy odsyłaczy
Każdy obrazek może być hiperłączem do jakiegoś pliku lub innej strony. Zwróć uwagę, że dotyczy to całego obrazka. Z chwilą umożliwienia publikacji grafiki na stronie i w erze stron opartych na grafice zaistniała potrzeba definiowana mapy odsyłaczy — inaczej mówiąc obrazka, którego różne części są odsyłaczami do innych miejsc.

Pierwszym rozwiązaniem, jakie się nasuwa, jest pocięcie naszego obrazka na mniejsze części i zadeklarowanie dla każdej z nich innego odsyłacza. Jest to rozwiązanie dobre i często stosowane, ale nie zawsze spełnia ono oczekiwania projektantów.

Kolejną metodą jest budowa mapy odsyłaczy. Na serwerze www.tucows.com/Windows możesz znaleźć kilka dobrych programów, które ułatwią Ci budowę takiej mapy. Poniżej wymieniłem jedne z ciekawszych narzędzi dostępnych na serwerze TUCOWS.
■    CoffeeCup Image Mapper,
■    Paint Shop Pro 7,
■    CuteMAP,
■    MapEdit Imagemap Editing Software,
■    HTML Map Designer Pro.

W tym rozdziale postaram się zbudować mapę za pomocą zwykłego programu graficznego (Paint Shop Pro) oraz edytora tekstowego. W części poświęconej przygotowaniu grafiki na potrzeby sieci dowiesz się, w jaki sposób można wykonać mapę odsyłaczy lub pociąć obrazek na mniejsze części, używając Paint Shop Pro.
Za deklarację mapy odsyłaczy odpowiada znacznik <map></map>. Zawiera on obowiązkowy atrybut name=””, który później jest wykorzystywany przy osadzaniu obrazka za pomocą znacznika <img />. Wewnątrz <map></map> znajduje się znacznik <area />, który definiuje aktywny obszar danego hiperłącza. Jak widzisz na poniższym przykładzie, znacznik <area /> zawiera następujące atrybuty:

■    href=“” — atrybut znany z definicji hiperłączy,
■    coords=”” — definiuje współrzędne krańcowych punktów aktywnego obszaru,
■    shape=”” — określa, czy aktywny obszar jest: kołem, kwadratem, obszarem dowolnym, przyjmuje następujące wartości:
♦    circle — koło,
♦    rect — kwadrat,
♦    polygon — wielokąt.
■    title=”” — odpowiednik atrybutu alt, omawianego przy okazji wstawiania obrazków do strony.

 

W praktyce musisz otworzyć obrazek w programie graficznym, np. Paint Shop Pro, i odczytać współrzędne obszarów aktywnych. Na rysunkach zaznaczyłem pewne obszary — przyjrzyj się im.

tmp8ff1-1Wyznaczanie punktów krańcowych na mapie odsyłaczy— lewy górny róg.

tmp8ff1-2Wyznaczanie punktów krańcowych na mapie odsyłaczy — prawy dolny róg.

Na przykładowym obrazku, którego fragment widoczny jest na rysunkach, mapa odsyłaczy będzie obejmowała każdą z flag. Chodzi o to, by oglądający po kliknięciu flagi mógł przenieść się do odpowiedniej wersji językowej strony.

Jak widzisz, na rysunku górnym umieściłem kursor myszy w lewym górnym narożniku. Zwróć też uwagę na lewy dolny róg całego rysunku — zaznaczyłem w nim dwie liczby: 609 oraz 69. Są to współrzędne pierwszego punktu, które są potrzebne do stworzenia mapy odsyłaczy.

Sytuacja wygląda podobnie na rysunku drugim, z tym, że tym razem zająłem się prawym dolnym narożnikiem obszaru. Operację należy powtórzyć dla pozostałych flag umieszczonych na rysunku.

Masz już współrzędne punktów oraz wiesz, że aktywne obszary obrazka są prostokątami. Czas stworzyć odpowiedni kod, definiujący mapę odsyłaczy na stronie WWW.

Poniżej zamieściłem przykładowy listing odpowiedzialny za sporządzanie mapy odsyłaczy dla rysunku i flag na nim umieszczonych.

<body>
<map name=”test”>
<area href=”http://balion.pl/owyd.fcgi” shape=”rect” coords=”609,69,626,80″ /> <area href=”http://balion.pl/owyd.fcgi?n=2″ shape=”rect“ coords=”633,69,650,80″ />
<area href=”http://balion.pl/owyd.fcgi?n=3″ shape=”rect” coords=”657,69,674,80″ />
<area href=“http://balion.pl/owyd.fcgi?n=4″ shape=”rect” coords=”681,69,698,80″ />
<area href=”http://balion.pl/owyd.fcgi?n=5″ shape=“rect” coords”705,69,722,80″ />
<area href=”http://balion.pl/owyd.fcgi?n=6“ shape=“rect” coords=”729,69,746,80″ />
</map>
<img src=”logo.gif” border=”0″ height=”92″ width”761″ usemap=“#test” /> </body>

Przeanalizujemy po kolei cały kod. W pierwszym wierszu znajduje się znacznik <map> wraz z atrybutem name. Jest to część obowiązkowa dla każdej mapy. Użycie atrybutu name pozwala na zdefiniowane kilku lub kilkunastu map odsyłaczy na jednej stronie.
Następne wiersze listingu to określenie aktywnego obszaru oraz adresu, do którego ma on prowadzić.

<area href=”http://balion.pl/owyd.fcgi” shape=“rect” coords=”609,69,626,80″>

Pogrubiona część listingu odpowiada za definicję obszaru mapy.

<area href=”http://balion.pl/owyd.fcgi” shape=”rect” coords=”609,69,626,80″>

Następny wyróżniony element to adres, do którego ma prowadzić obszar na mapie odsyłaczy.

<area href=”http://balion.pl/owyd.fcgi” shape=”rect” coords=“609,69,626,80″>

Atrybut SHAPE określa kształt aktywnego obszaru.

<area href=”http://balion.pl/owyd.fcgi” shape=”rect” coords=”609,69,626,80″>

Ostatnia część określa współrzędne aktywnego obszaru. Przypomnę, że dla przykładowego prostokąta chodzi o lewy górny i prawy dolny wierzchołek.

Po znaczniku zamykającym </map> znajduje się wywołanie obrazka na stronie WWW. Jednak bardzo ważnym elementem tego fragmentu kodu jest atrybut name. Odpowiada on za połączenia obrazka z mapą zdefiniowaną w kodzie strony. Wartość name w znaczniku <img /> powinna być taka sama, jak nazwa nadana mapie odsyłaczy, a do tego bezpośrednio przed nią musisz umieścić znak #.

Oczywiście nie ma takiej konieczności, by wywołanie obrazka znajdowało się bezpośrednio pod kodem definiującym mapę odsyłaczy. Spokojnie możesz umieścić definicję mapy tuż po otwierającym znaczniku <body>, a obrazek wstawić do dokumentu, np. na jego końcu. Ważne jest tylko, by poprawnie nadać nazwę mapie i później tę samą nazwę wywołać w znaczniku obrazka.

Koniecznie zdefiniuj rozmiary obrazka, który ma być mapą odsyłaczy — określ jego wysokość i szerokość.

Tworząc mapę odsyłaczy z obszarami aktywnymi w kształcie koła, musisz określić dwa punkty: środek koła oraz jego promień. W przypadku wielokątów natomiast — dla każdego z wierzchołków musisz zdefiniować dwie współrzędne.

Przy tworzeniu wielokątnych obszarów aktywnych zdecydowanie polecam używanie specjalnych narzędzi, o których już wspominałem.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *