Przyciski standardowego graficznego menu mają przeważnie takie kształty, które można podzielić na prostokątne fragmenty i odpowiednio pociąć obrazek. Problem zaczyna się w momencie, gdy potrzebujemy podpiąć odnośniki pod grafikę, której poszczególne obszary mają nieregularne kształty.

Dotyczy to na przykład map, gdzie zaznaczone granice krajów, czy też województw przylegają do siebie i w żaden sposób nie da się ich sensownie rozdzielić, używając jedynie pionowych i poziomych linii.

W przypadku, gdy napotkamy na taki problem, warto się przyjrzeć możliwościom Image Map dostępnym w języku HTML. Ponieważ jednak ręczne przygotowanie takiej mapy w HTML’u jest stosunkowo skomplikowane oraz bardzo pracochłonne, dobrze jest jednak posłużyć się narzędziami, które znacznie przyspieszą i ułatwią nam pracę. Możliwości takie dają nam między innymi programy Macromedia Fireworks oraz Macromedia Dreamweaver.

FIREWORKS

1. Zaznaczanie obszarów
   

Otwieramy nasz obrazek i wybieramy z paska narzędzi (Window/Tools) narzędzie Hotspot (obszar aktywny) Tool (patrz obrazek po prawej stronie). Mamy do dyspozycji trzy możliwości: 

• rectangular – zaznaczenie obszaru prostokątnego;
• circular – okrąg (niestety brak możliwości zdefiniowania kształtu owalnego);
• polygon - kształt wieloboku (dowolna nieregularna krzywa zamknięta), czyli praktycznie wszystkie możliwe kształty, ale niestety ich definiowanie sprowadza się do ręcznego wyznaczania kształtu.

Jeżeli któryś z obszarów ma kształt prostokąta lub koła, możemy naciskając klawisz ALT zacząć rysowanie od jego środka (standardowo zaczynamy od lewego górnego rogu). Obszary nieregularne uzyskujemy poprzez zaznaczenie kolejnych punktów na obrzeżu danego kształtu – patrz przykłady poniżej.

Po zaznaczeniu w ten sposób wszystkich żądanych obszarów otwieramy okno “Object” (Window/Object lub kombinacja klawiszy: ALT+F2).

W oknie tym mamy możliwość przyporządkowania odpowiednich odnośników, dla wszystkich zaznaczonych obszarów. Mogą być to odrębne pliki lub odnośnik do tekstu w aktualnym pliku (np.: #mapa_województwa).

Następnie definiujemy <alt>, czyli nazwę odnośnika, który pojawia się po najechaniu myszką na dany obszar.

Na koniec określamy w jakiej formie chcemy wyświetlić odnośnik:
_none – dokument zostanie otwarty tak jak wszystkie inne odnośniki z danej strony (page default);
_blank - dokument jest otwierany w nowym oknie;
_parent:- dokument jest otwierany w głównej (parent) ramce lub tej ramce, w której link jest umieszczony
_self - dokument jest otwierany w tym samym oknie co obecny ( jeżeli ogólne ustawienia strony nie zostały zmienione na używanie nowego okna, to nie ma potrzeby ustawiania tej opcji);
_top - w przypadku używania ramek (frames), dokument wykorzystuje całe okno przeglądarki, a ramki zostają usunięte

Wybieramy z menu File opcję Export lub używamy kombinacji klawiszy: CTRL+SHIFT+R.

Wpisujemy w okienku “File name”: nazwę oraz ścieżkę dostępu do docelowego pliku HTML.

Nie zmieniamy opcji “Save as type”: HTML and images; ani też opcji: “HTML”” Export HTML file.

Jeżeli chcemy, aby nasz obrazek został zapisany w podkatalogu, zaznaczamy “Put images in Subfolder” i po naciśnięciu przycisku “Browse” wybieramy konkretny katalog.

Następnie używamy dowolnego programu do edycji, czy też rozbudowy zawartości strony.

Tworzymy nowy plik lub otwieramy już istniejący. Wstawiamy do niego obrazek (Insert/Image lub kombinacja klawiszy CTRL+ALT+I).

Zaznaczamy obrazek i wyświetlamy okno “Properties”. (Window/properties lub CTRL+F3).

Jeżeli nie widzimy wszystkich opcji, to rozwijamy okienko posługując się strzałką w prawym dolnym rogu.

W polu “map” wpisujemy nazwę mapy (np.: Nowy Podział Terytorialny Polski).

Następnie zaznaczamy obszary w sposób analogiczny jak w Fireworks.

2. Definiowanie odnośników

Możemy wpisywać dane na bieżąco lub dodać je po zaznaczeniu wszystkich obszarów. W obu przypadkach korzystamy z tego samego okna, czyli “Properties”.

W powyższym przykładzie odnośnik (o nazwie Małopolskie) prowadzi do innego miejsca na danej stronie, oznaczonego jako #malopolskie (<a name="malopolskie">Małopolskie</a>).

Opcje “target”: _none, _blank, _parent, _self, _top.

Pomiędzy oknem “Hotspot” a oknem “Properties” przełączamy się za pomocą ikonki przedstawiającej strzałkę, która znajduje się w lewym dolnym rogu.

Zapisujemy plik na dysku i sprawdzamy, czy nie zrobiliśmy literówek przy wpisywaniu odnośników .
Zrzucamy wszystko na sieć i sprawdzamy jeszcze raz poprawność wszystkich linków.

Jeżeli rzeczywiście nie musisz stosować Imagemaps – nie rób tego. Obrazki odpowiednio pocięte w programie graficznym ładują się znacznie szybciej, kod strony jest bardziej przejrzysty oraz jego korekta i modyfikacja jest łatwiejsza.

Jeżeli nie posiadasz żadnego z powyższych, niestety komercyjnych i stosunkowo drogich aplikacji, to w “Strefie Zrzutu” na stronie Republiki jest do wyboru kilkanaście programów w wersji shareware i freeware do cięcia grafiki oraz tworzenia i edycji map graficznych: http://fabryka.republika.pl/strefa/strefa_cat.asp?id=45

Agnieszka Richter

Artykuł został napisany dla Optimus Pascal S.A. Publikowanie całości lub fragmentów niniejszego artykułu jest zabronione bez zgody właściciela.
 

[ Strona główna ] [ Uwagi ogólne ] [ Błędy przy tworzeniu stron ]
[ Przykazania webdesignera ] [ Artykuły ] [ Linki ] [ Słowo od autorki ]

Copyright © 1999-2001, Kaila Studio. Wszelkie prawa zastrzeżone.
Agnieszka 'Kaila' Richter - aga@kailastudio.com.pl
Ostatnia aktualizacja: 4 kwietnia 2002