Uwaga! To co zaraz się dowiemy
nie umieszczamy pomiędzy znacznikami <A>! Na początku
musimy użyć atrybutu USEMAP do znacznika <IMG>, co
oznacza, że dokument używa mapy o takiej nazwie, jaka jest
umieszczona w wartości tego atrybutu i tak samo jak w przypadku
zakotwiczeń jest ona poprzedzona hashem. Pamiętajmy, aby w
kodzie obrazka były informacje o wymiarach i, że jest to własne
mapa np.:
<IMG SRC="atlas.gif"
WIDTH="120" HEIGHT="85" ALT="mapa odsyłaczy"
USEMAP="#mapa">
Następnie pod znacznikiem <IMG> umieszczamy opcjonalny
znacznik <MAP> wraz z atrybutem (tak samo jak w
zakotwiczeniach) NAME o wartości nazwy mapy, oczywiście bez
znaku hash - #. Wewnątrz znacznika <MAP> umieszcza się
znaczniki <AREA> (ang. strefa), które to określają położenie
odsyłaczy na obrazku. Każdy inny aktywny obszar na obrazku to
nowy znacznik <AREA>. Znacznik ten składa się z kilku
atrybutów. Pierwszym jakim poznamy jest SHAPE (ang. kształt) i
określa kształt danej mapy. Jego wartości to:
rect - (ang. rectengular – prostokąt) prostokątny obszar aktywny
circle - (ang. okrąg) okrągły obszar aktywny
polygon - (ang. wielokąt) obszar aktywny o nieregularnym kształcie.
Kolejnym
ważnym elementem jest COORDS, który przechowuje wszystkie
punkty. Jego wartości to liczby oddzielane od siebie przecinkami
zawierające informacje o miejscach mapy. Oto schemat, jak
powinno wypełniać się ten atrybut [X (X1, X2, X3) - poziome położenie
piksela, Y (Y1, Y2, Y3) - pionowe położenie piksela, R - długość
promienia w pikselach]:
Dla SHAPE="rect" - X1,Y1,X2,Y2 – X1 - lewy górny
wierzchołek licząc od lewej krawędzi, Y1 - lewy górny
wierzchołek licząc od górnej krawędzi, X2 - prawy dol ny
wierzchołek licząc od lewej krawędzi, Y2 - prawy dolny
wierzchołek licząc od lewej krawędzi. Dla SHAPE="circle"
- X,Y,R - X - środek okręgu licząc od lewej krawędzi, Y - środek
okręgu licząc od górnej krawędzi, R - długość promienia
Dla SHAPE="circle" - X1,Y1,X2,Y2,X3,Y3... - każde dwie
liczby prezentują położenie kolejnych pikseli, które są z
sobą łączone i tak powstaje kształt mapy (pierwszy piksel z
ostatnim jest automatycznie łączony).
Inne ważne atrybuty znacznika <AREA> to:
HREF - adres odsyłacza
TITLE - tekst, który pojawi się po najechaniu kursorem myszy nad daną danym obszarem
Jeżeli
jeszcze dokładnie nie wiemy jakie wartości wstawiać w atrybut
COORDS to powiem, że bardzo wiele programów graficznych, po
najechaniu pędzelkiem, czy innym wskaźnikiem na dany punkt
podają jego współrzędne (choćby MS Paint). Oto przykład
mapy odsyłaczy + jej kod, z wykorzystaniem trzech pól, które
prezentowane są na rysunku (punkty 2 i 3 nie są potrzebne, ale
zostały stworzone do upewnienia się, czy pozostałe dwa boki
prostokąta mają odpowiednie wartości):
<IMG
WIDTH="310" HEIGHT="160" SRC="mapa.gif"
USEMAP="#mapa" BORDER="0" TITLE="pole
nieaktywne" ALT="mapa odsyłaczy">
<MAP NAME="mapa">
<AREA SHAPE="rect" BORDER COORDS="7,7,42,40"
HREF="http:// prostokat.pl" TITLE="prostokąt">
<AREA SHAPE="circle" COORDS="31,73,25"
HREF="http:/ /okrag.pl" TITLE="okrąg">
<AREA SHAPE="polygon" COORDS="49,7,49,42,66,59,66,82,50,98,193,99,193,7"
HREF="http:/ /wielokat.pl" TITLE="wielokąt">
</MAP>