Mapy odsyłaczy cz.2


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 *