Kurs HTML

Czym są mapy obrazkowe?

Mapy obrazkowe (image maps) w HTML pozwalają na zdefiniowanie na jednym obrazku wielu klikalnych obszarów, z których każdy może prowadzić do innego linku. Zamiast czynić cały obrazek jednym linkiem, możemy podzielić go na "gorące strefy" (hotspots), które reagują na kliknięcia.

Jest to przydatne na przykład w mapach geograficznych (kliknięcie regionu prowadzi do informacji o nim), schematach organizacyjnych, infografikach czy niestandardowych interfejsach użytkownika.

Do tworzenia map obrazkowych używa się trzech głównych elementów:

• Znacznika <img> z atrybutem usemap.
• Znacznika <map> z atrybutem name pasującym do wartości usemap.
• Znaczników <area> wewnątrz <map>, definiujących poszczególne klikalne obszary.

Krok 1: Obrazek z atrybutem `usemap`

Najpierw wstawiamy obrazek za pomocą znacznika <img>. Kluczowe jest dodanie atrybutu usemap. Jego wartość musi zaczynać się od znaku #, po którym następuje nazwa mapy, którą zdefiniujemy w kolejnym kroku.

<img src="planety.jpg" alt="Układ Słoneczny" width="600" height="300" usemap="#mapa-planet">Kopiuj

Krok 2: Definicja mapy za pomocą <map>

Następnie tworzymy znacznik <map>. Musi on posiadać atrybut name, którego wartość jest identyczna jak wartość atrybutu usemap w obrazku (ale bez znaku #).

<map name="mapa-planet">
  <!-- Tutaj znajdą się definicje obszarów (<area>) -->
</map>Kopiuj

Znacznik <map> jest kontenerem dla definicji klikalnych obszarów.

Krok 3: Definiowanie obszarów za pomocą <area>

Wewnątrz znacznika <map> umieszczamy jeden lub więcej znaczników <area>. Każdy <area> definiuje jeden klikalny obszar na obrazku. Znacznik <area> jest pusty i wymaga kilku atrybutów:

• shape: Określa kształt obszaru. Możliwe wartości:
  • rect: Prostokąt.
  • circle: Koło.
  • poly: Wielokąt (dowolny kształt).
  • default: Cały obszar obrazka (jeśli nie pasuje żaden inny obszar).
• coords: Określa współrzędne obszaru na obrazku (w pikselach). Format współrzędnych zależy od wartości atrybutu shape:
  • shape="rect": coords="x1,y1,x2,y2" (lewy górny róg x1,y1; prawy dolny róg x2,y2)
  • shape="circle": coords="x,y,promien" (środek koła x,y; promień)
  • shape="poly": coords="x1,y1,x2,y2,x3,y3,..." (kolejne wierzchołki wielokąta)
  Współrzędne liczone są od lewego górnego rogu obrazka (0,0).
• href: Adres URL, do którego ma prowadzić kliknięcie danego obszaru.
• alt: Tekst alternatywny opisujący cel linku dla danego obszaru. Jest bardzo ważny dla dostępności i SEO.
• target, download, rel itp.: Można używać tych samych dodatkowych atrybutów linków co w standardowym znaczniku <a>.

Przykład kompletnej mapy obrazkowej:

<!-- Obrazek z mapą -->
<img src="ksztalty.png" alt="Kolorowe kształty geometryczne" width="300" height="150" usemap="#mapa-ksztaltow" style="border:1px solid black;">

<!-- Definicja mapy -->
<map name="mapa-ksztaltow">
  <!-- Obszar koła -->
  <area shape="circle" coords="75,75,50" href="kolo.php" alt="Informacje o kole">
  
  <!-- Obszar prostokąta -->
  <area shape="rect" coords="180,25,280,125" href="prostokat.php" alt="Informacje o prostokącie" target="_blank" rel="noopener noreferrer">
  
  <!-- Można dodać więcej obszarów... -->
</map>Kopiuj

Narzędzia do tworzenia map obrazkowych

Ręczne wyznaczanie współrzędnych, zwłaszcza dla kształtów poly, może być żmudne. Istnieją narzędzia online i programy graficzne, które ułatwiają tworzenie map obrazkowych, generując gotowy kod HTML:

• Wiele edytorów graficznych (np. GIMP, Adobe Photoshop - choć może wymagać wtyczek) ma funkcje tworzenia map.
• Istnieją dedykowane generatory map online (wyszukaj "html image map generator").

Dostępność i responsywność

Mapy obrazkowe mogą stanowić wyzwanie pod względem dostępności i responsywności:

• Dostępność: Kluczowe jest dostarczenie zrozumiałego tekstu alt dla każdego znacznika <area>, opisującego cel linku. Użytkownicy czytników ekranu będą nawigować po tych linkach.
• Responsywność: Tradycyjne mapy obrazkowe oparte na stałych współrzędnych pikselowych słabo skalują się na różnych rozmiarach ekranów. Jeśli obrazek jest skalowany (np. za pomocą CSS width: 100%), współrzędne mapy przestają pasować. Istnieją techniki JavaScript lub biblioteki (np. jQuery RWD Image Maps), które próbują rozwiązać ten problem, dynamicznie przeliczając współrzędne, ale mogą być skomplikowane w implementacji. W wielu przypadkach lepszym rozwiązaniem dla responsywnych interfejsów może być użycie SVG lub podział obrazka na mniejsze, osobno linkowane części.

Zadanie praktyczne (z rozwiązaniem)

Zadanie: Użyj dostarczonego obrazka (placeholder 300x100). Zdefiniuj na nim dwa klikalne obszary: prostokątny w lewej połowie (0-150px szerokości) i kołowy w prawej połowie (środek np. w 225,50). Oba obszary mają prowadzić do strony google.com, ale mieć różne teksty alternatywne.

Rozwiązanie:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>Mapa Obrazkowa - Zadanie</title>
</head>
<body>
    <h1>Test mapy obrazkowej</h1>
    
    <img src="https://via.placeholder.com/300x100/eee/ccc?text=Kliknij+mnie" 
         alt="Obrazek z dwoma obszarami klikalnymi" 
         width="300" 
         height="100" 
         usemap="#test-mapa" 
         style="border:1px solid black;">
         
    <map name="test-mapa">
        <!-- Lewy prostokąt -->
        <area shape="rect" 
              coords="0,0,150,100" 
              href="https://www.google.com" 
              alt="Przejdź do Google (obszar prostokątny)" 
              target="_blank" rel="noopener noreferrer">
              
        <!-- Prawe koło -->
        <area shape="circle" 
              coords="225,50,45" 
              href="https://www.google.com" 
              alt="Przejdź do Google (obszar kołowy)" 
              target="_blank" rel="noopener noreferrer">
    </map>

</body>
</html>Kopiuj