HTML Lekcja 3.2 - Linki - Mapy graficzne
Mapy graficzne są wygodnym i efektownym sposobem tworzenia linków na elementach graficznych jak fotografie czy rysunki.
Polega to na zadeklarowaniu obrazka jako mapowanego, a następnie zdefiniowaniu obszarów na których będzie się klikać wraz z odpowiadającytmi im linkami.
Zadeklarowanie obrazka jako mapy wymaga wstawienia do znacznika obrazka atrybutu usemap wraz z odwołaniem się do opisu tzw mapy
usemap="#A1".
Opis czyli mapę umieszcza się w dowolnym miejscu dokumentu pomiędzy znacznikami
<map> i
</map>. Znacznik otwierający zawiera atrybut
name o wartości równej wartości atrybutu
usemap, ale nie poprzedzony krzyżykiem. Oto znacznik mapowanego obrazka:
<img src=mapa.gif usemap="#A1">
Aby zaznaczyć na obrazku miejsca, na których będziemy klikać mamy do dyspozycji trzy typy obszarów:
kółko,
circle, prostokąt o bokach równoległych do krawędzi ekranu,
rect, (skrót od rectangle), oraz wielokąt
polygon. Obrazek otwieramy w jakimś znanym nam programie graficznym, gdzie będziemy potrafili zczytać pozycję myszki znajdującej sie w dowolnym punkcie na obrazku.
Jeśli nie masz programu graficznego lub nie potrafisz użyć go do zczytania pozycji myszki możesz ściągnąć prosty program
tutaj.
Następnie wybieramy miejsca i określamy w jakie typy obszarów zechcemy je zamknąć. Potem sczytujemy współrzędne punktów charakterystycznych naszych obszarów. Dla kółka są to współrzędne jego
środka, przy czy musimy jeszcze określić
promień.
Dla prostokąta to współrzędne jego
przeciwległych wierzchołków, lewego-górnego i prawego-dolnego.
Dla wielokąta to
kolejne współrzędne jego wierzchołków sczytywane w kolejności zgodnej ze wskazówkami zegara, począwszyj od punktu wysuniętego najbardzie na lewo i do góry. Wszystkie te dane zapisujemy obok siebie oddzielając je przecinkami i robimy to osobno dla każdego obszaru. Jeśli chcemy, na obrazku możemy zaznaczyć wybrane obszary widoczną linią i zachować kopię obrazka do celów dokumentacji.
Nastepnym krokiem jest kodowanie mapy. W tym celu pomiędzy znaczniki
<map> i
</map> dla każdego wybranego i zdefiniowanego obszaru wstawiamy znacznik
area co oznacza obszar. Znacznik ten posiada atrybut
shape co oznacza kształt i atrybut
coords, skrót od coordinates co oznacza współrzęne. Następne atrybuty to znane już nam atrybuty
href i opcjonalny
alt. Kompletnie wypełniona mapa odpowiadająca obrazkowi na tej stronie będzie miała postać:
<img src=mapa.gif usemap="#A1">
<map name="A1">
<area shape="circle" coords="377,117,29" href="australia.htm" alt="Australia z Oceanią">
<area shape="circle" coords="210,17,254,56" href="europa.htm" alt="Europa">
<area shape="circle" coords="214,58,234,57,257,62,277,87,285,86,255, 136,243,135,234,115,232,92,210,92,199,73" alt="Afryka" href="afryka.htm">
</map>
Efekty działania tego ,kodu można zobaczyć klikając na wybrane obszary: Afrykę, Australię i Europę.
Aby wrócić do lekcji nalęży skorzystać ze wstawionego w tym celu skrótu.
[dalej]