Przejdź do treści

Mapa odsyłaczy <img usemap, map, area>

Jak dodać kilka odnośników (linków, hiperłączy, odsyłaczy hipertekstowych) na jednym obrazku?

Mapa odsyłaczy <img usemap, map, area>

<img src="ścieżka dostępu do obrazka" alt="tekst alternatywny" usemap="#nazwa_mapy">
<map id="nazwa_mapy" name="nazwa_mapy">
	<area shape="kształt" coords="współrzędne" href="adres" alt="tekst alternatywny">
	<area shape="kształt" coords="współrzędne" href="adres" alt="tekst alternatywny">
	(...)
</map>
ścieżka dostępu do obrazka
Lokalizacja na dysku, gdzie znajduje się żądany plik obrazka.
nazwa_mapy
Dowolny tekst, byleby był on taki sam w pierwszej i w drugiej linii, a dodatkowo w pierwszym wierszu musi być poprzedzony znakiem krzyżyka (#). Na jednej stronie nie mogą się znajdować dwie mapy o takiej samej nazwie!
(...)
Dalsze polecenia typu: <area shape="kształt" coords="współrzędne" href="adres" alt="tekst alternatywny">, które stworzą następne aktywne pola na obrazku.
kształt
Kształt obszaru w mapie odsyłaczy:
  • rect - pole ograniczone prostokątem
  • poly - pole ograniczone wielokątem nieregularnym
  • circle - koło
współrzędne
  1. "xp,yp, xk,yk" - w przypadku prostokąta (rect):
    • xp - współrzędna pozioma lewego-górnego wierzchołka prostokąta
    • yp - współrzędna pionowa lewego-górnego wierzchołka
    • xk - współrzędna pozioma prawego-dolnego wierzchołka prostokąta
    • yk - współrzędna pionowa prawego-dolnego wierzchołka
  2. "x1,y1, x2,y2, x3,y3..." - w przypadku wielokąta (poly):
    • "xn,yn - współrzędne poziome i pionowe kolejnych wierzchołków wielokąta
  3. "x,y, r" - w przypadku koła (circle):
    • "x,y" - współrzędne środka
    • "r" - długość promienia

We wszystkich przypadkach współrzędne są liczone od lewego górnego wierzchołka obrazka, który stanowi punkt zerowy układu współrzędnych.

adres
Wartość tworzona analogicznie jak w przypadku odsyłaczy do: podstrony, etykiety, adresu internetowego, poczty e-mail czy dowolnych innych odsyłaczy (w zależności od wybranego typu odsyłacza).

Po wywołaniu tej komendy, zostanie wczytany obrazek o podanej ścieżce dostępu. Następnie będzie on podzielony na kilka pól (w sposób niewidoczny), z których każde będzie przyporządkowane oddzielnemu odsyłaczowi. Dzięki temu na tylko jednym rysunku możemy umiejscowić więcej niż jeden odnośnik.

Wiele edytorów HTML posiada wbudowany generator mapy odsyłaczy, dzięki któremu można w prosty i szybki sposób określić współrzędnie poszczególnych obszarów, wskazując kolejne punkty myszką na wyświetlonym obrazku. W przypadku bardzo skomplikowanych obszarów, rozważ użycie serwerowej mapy odsyłaczy.

Istnieją przypadki, kiedy obrazek może nie wyświetlić się na ekranie - np. z powodu problemów z połączeniem internetowym, nieobsługiwanym formatem graficznym albo gdy użytkownik po prostu wyłączy wyświetlanie grafiki w swojej przeglądarce. W takiej sytuacji nawet jeśli każdy obszar w mapie odsyłaczy posiada atrybut alt="...", przeglądarki mogą nie wyświetlić jego wartości na ekranie.

Jeśli obrazek mapy odsyłaczy nie wyświetli się na ekranie, użytkownik nie będzie wiedział, w co może kliknąć! Dlatego warto również umieścić gdzieś zwykłe odsyłacze hipertekstowe, prowadzące do tych samych dokumentów.

Przykład <img usemap, map, area>

<img src="odsylacz.gif" alt="Mapa odsyłaczy" usemap="#nazwa_mapy" width="200" height="70">
<map id="nazwa_mapy" name="nazwa_mapy">
	<area shape="rect" coords="5,5, 56,65" href="..." alt="...">
	<area shape="poly" coords="61,64, 106,4, 133,56" href="..." alt="...">
	<area shape="circle" coords="166,35, 31" href="..." alt="...">
</map>
Mapa odsyłaczyDo podstronyDo etykietyDo adresu internetowego

Aby usunąć obramowanie wokół obrazka, należy podać atrybut style="border: 0" dla znacznika <img>.

Mapa odsyłaczyDo podstronyDo etykietyDo adresu internetowego

Nakładanie obszarów

Załóżmy, że chcemy uzyskać następujący efekt: definiujemy na przygotowanym obrazku jeden okrągły i jeden trójkątny obszar z odsyłaczami, ale chcemy dodatkowo, aby kliknięcie na dowolnych pozostałych częściach grafiki, odsyłało na osobny adres. Możemy tego dokonać definiując na końcu trzeci kształt, o takich samych rozmiarach jak wymiary całego obrazka. Jeżeli powierzchnie, zdefiniowane na obrazku za pomocą znacznika <area>, nakładają się, pierwszeństwo mają te obszary, które zostały zdefiniowane wcześniej. Dlatego kształt wstawiony na końcu, nie przykrywa ustalonych wcześniej obszarów, ale zostaje umieszczony pod nimi.

Pytania i odpowiedzi <img usemap, map id>

Co to jest mapa odsyłaczy?

Mapa odsyłaczy to element używany w języku HTML do tworzenia klikalnych obszarów na obrazkach, które prowadzą do różnych lokalizacji na stronie internetowej.

W jaki sposób przypisać mapę odsyłaczy do obrazka w HTML?

W tym celu do znacznika obrazka należy dodać atrybut usemap="#...", a do znacznika mapy odsyłaczy - odpowiadający mu atrybut id="...". Na przykład: <img src="..." alt="..." usemap="#nazwa_mapy"> <map id="nazwa_mapy">...</map>. Należy pamiętać, że w tym samym dokumencie HTML co prawda może być wstawiona dowolna liczba różnych map odsyłaczy, ale każda z nich musi mieć inną nazwę. W przeciwnym razie przeglądarka nie wiedziałaby, która z nich odnosi się do wskazanego obrazka. Nie można również przypisać więcej niż jednej mapy odsyłaczy do tego samego obrazka.

Przeglądarki


Chrome
Firefox
Edge
Opera
Safari
<area>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
<area alt>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
<area coords>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
<area href>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
<area shape>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
<map>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23
<map name>1
2008-12-11		1
2004-11-09		12
2015-07-29		15
2013-07-02		1
2003-06-23

Komentarze

Zobacz więcej komentarzy

Facebook