Artykuł
09/27/2011

Encyklopedia: Jak tworzyć mapę odsyłaczy - Kurs HTML i CSS

Autor: Norbert Blandzi

Opublikowano: 2011-09-26

Częstym problemem, podczas tworzenia strony internetowej, jest utworzenie kilku odnośników, które będą umieszczone na obszarze jednego obrazka. Możemy to wykorzystać w przypadku mapy geograficznej z odnośnikami w kształcie obszarów państw. Do tego celu HTML dostarcza mapę odsyłaczy, którą tworzymy, wykorzystując konstrukcję:

<img src="obrazek" alt="tekst" usemap="#name" />
<map id="id" name="nazwa">
    <area shape="kształt" coords="współrzędne" href="adres" alt="tekst" />
    …
</map>

Znaczniki i atrybuty:

usemap – nazwa zastosowanej mapy na danym obrazku,
<map> – tworzy nową mapę odsyłaczy,
id – unikalna nazwa id,
name – nazwa mapy (taka jak zdefiniowana w atrybucie usemap),
area – tworzy nowy obszar (odnośnik) na obrazku,
shape – kształt obszaru w mapie odsyłaczy. Możliwe wartości:

rect – pole ograniczone prostokątem,

poly – pole ograniczone wielokątem,

circle – pole ograniczone okręgiem,

color – kolor elementu,
coords – współrzędne pola, zawsze liczone od lewego górnego wierzchołka obrazka (lewy górny wierzchołek obrazka stanowi współrzędną 0,0),

rect – x1,y1,x2,y2 (x1 – współrzędna pozioma lewego górnego wierzchołka, y1 – współrzędna pionowa lewego górnego wierzchołka, x2 – współrzędna pozioma prawego dolnego wierzchołka, y2 – współrzędna pionowa prawego dolnego wierzchołka),

poly – x1,y1,x2,y2,…,xn,yn (n-liczba wierzchołków) liczby te są kolejnymi współrzędnymi wierzchołków w poziomie i pionie wielokąta,

circle – x,y,r (x, y – współrzędne środka okręgu, r – długość promienia).

Przykład

W naszym przypadku wykorzystamy obrazek.jpg. Zobacz Rys. 1. z zaznaczonymi punktami obszarów.

Rys. 1. Obrazek.jpg z zaznaczonymi punktami obszarów.

<html>
<head> 
    <title>Jak tworzyć mapę odsyłaczy w HTML</title>
    <style type="text/css">
        img { width:180px; height:180px; }
    </style> 
</head> 
<body> 
    <img src="obrazek.JPG" alt="Mapa Odsyłaczy" usemap="#mapa" />
    <map id="mapa" name="mapa">
    <area shape="rect" coords="0,0,90,90" 
        href="https://msdn.microsoft.com/pl-pl" alt="MSDN PL" /> 
    <area shape="rect" coords="0,90,90,180" 
        href="https://www.microsoft.com/pl/PL/default.aspx" alt="Microsoft" />
    <area shape="rect" coords="90,0,180,90" 
        href="http://ie.microsoft.com/testdrive/" alt="IE Test Drive" /> 
    <area shape="rect" coords="90,90,180,180" 
        href="https://windows.microsoft.com/pl-PL/" alt="Windows" />
    </map>
</body> 
</html>

W przeglądarce przykład wygląda tak, jak na Rys. 2.

Rys. 2. Mapa odsyłaczy.

Sprawdź:

Zobacz, jak praktycznie formatować odnośniki w samouczku:

Encyklopedia: Jak tworzyć mapę odsyłaczy - Kurs HTML i CSS

Autor: Norbert Blandzi

Przykład

Dodatkowe zasoby