Korzystanie z mapy obrazka (jeden rysunek kilka odnośników)

 zdefiniowanie mapy w dokumencie HTML nie jest trudne. Trzeba tylko odpowiednio zdefiniować mapę Obsługa mapy odbywa się na naszej własnej stronie. Musimy zdefiniować obszar aktywny naszej mapy

Poniżej przedstawiony jest kod źródłowy przykładowego dokumentu - należy zwrócić uwagę na sposób definiowania mapy oraz określania obszarów aktywnych.


<title>Definiowanie mapy</title>

<body bgcolor="FFFFFF" text="000050">

<br><br>  przejście do nowej linii
<hr> - linia pozioma patrz wcześniejsze lekcje

Poniższy fragment tekstu przedstawia przykład kodu źródłowego HTML umożliwiającego zastosowanie mapy w dokumencie HTML. Mapa definiowana jest przy zastosowaniu znacznika MAP, a obszary aktywne - za pomocą znacznika AREA.

Znacznik MAP rozpoczyna definiowanie mapy, jego atrybut NAME nadaje definiowanej mapie etykietę / nazwę/ , którą jest wartość tego argumentu.

<MAP NAME="mapaeuropa">  dowolna nawa raczej stosować wyraz a nie kilka wyrazów np: mapa europy oddzielnie
 

Znacznik IMG dołącza obraz do dokumentu, jego atrybut SRC wskazuje na konkretny obraz. Atrybut BORDER  określa grubość obramowania wokół ilustracji /podawana w pikselach/, atrybut USEMAP dokonuje powiązania danego obrazu z definicją mapy.

<img src="europa.jpg" border="12" usemap="#mapaeuropa"><br> do etykiety przypisujemy ilustracje w tym przypadku europa.jpg
  

Znacznik AREA definiuje obszar aktywny mapy; używa się go między znacznikami <MAP> i </MAP>. Atrybut SHAPE tego znacznika określa kształt obszaru zależnie od wartości, którą może być:
               RECT - prostokąt lub kwadrat,
               CIRCLE - koło,
               POLY - obszar nieregularny.
Atrybut COORDS określa współrzędne danego obszaru tak więc dla prostokąta wartością są współrzędne x,y lewego górnego wierzchołka i dolnego prawego, dla koła - współrzędne x,y środka i długość promienia, dla obszaru nieregularnego - współrzędne x,y wierzchołków tego obszaru.
Wszystkie współrzędne podaje się w pikselach (Wymagane współrzędne można określić za pomocą programu graficznego, w którym należy odczytać położenie kursora myszy. Znacznik AREA ma jeszcze jeden atrybut - HREF; wskazuje on dokument, który będzie załadowany w przypadku naciśnięcia lewego przycisku myszy na tym obszarze.

Uwaga:

Współrzędne x,y punktu wpisujemy rozdzielając je przecinkiem bez spacji; spacją rozdzielamy pary x,y wskazujące na poszczególne punkty. Na przykład:

<AREA SHAPE="CIRCLE" COORDS= " 279,328, 25 " href="http://www.zsp2wadowice.iap.pl">

lub

<AREA SHAPE="POLY" COORDS= " 279,328, 289,322, 309,314, 340,327, 334,338, 344,368, 313,359 " href="abc.htm">

lub

<AREA SHAPE="RECT" COORDS= " 79,328, 121,395 " href="abc.htm">

 

W powyższym przykładzie zastosowano trzy rodzaje obszarów mapy, jakie są dostępne w języku HTML.

 

 

Poniżej możesz poćwiczyć.

W oknie edytora możesz wprowadzić zmiany w tekście kodu HTML, a po naciśnięciu przycisku "Pokaż wygląd strony" zobaczysz efekt działania zmodyfikowanego kodu, który sam dokonałeś pozmieniaj w ramce dane i obejrzyj je.