Jak tworzyć mapy obrazów?

Jesteś tutaj:

Jak tworzyć mapy obrazów dla początkujących?

Mapa obrazu (ang. image map) to interaktywny element na stronie internetowej, który pozwala na dodanie klikalnych obszarów (tzw. hotspotów) na obrazku. Każdy z tych obszarów może prowadzić do innego linku, co umożliwia tworzenie interaktywnych grafik z wieloma odnośnikami. Mapy obrazów są definiowane w HTML za pomocą znaczników <map> i <area>.

Chcesz poznać więcej szczegółów na temat tworzenia map obrazów i ich zastosowań?

Rozwinięcie tematu map obrazów

Tworzenie map obrazów polega na wskazaniu, które fragmenty obrazu będą klikalne, i przypisaniu im odpowiednich linków. Aby stworzyć mapę obrazu, należy zastosować kilka kroków:

  • Przygotowanie obrazu – wybierz obraz, na którym chcesz umieścić klikalne obszary. Może to być schemat, plan, infografika czy zdjęcie.
  • Zdefiniowanie mapy obrazu – użyj znacznika <map> z unikalnym atrybutem name, aby zdefiniować mapę.
  • Określenie klikalnych obszarów – użyj znacznika <area> do zdefiniowania obszarów i przypisz im odpowiednie atrybuty, takie jak shape (kształt), coords (współrzędne) i href (adres linku).
  • Połączenie obrazu z mapą – dodaj znacznik <img> z atrybutem usemap, aby połączyć obraz z wcześniej zdefiniowaną mapą.

Przykładowy kod HTML mapy obrazu:


<img src="plan.jpg" usemap="#mymap" alt="Plan budynku">
<map name="mymap">
  <area shape="rect" coords="34,44,270,350" href="sala1.html" alt="Sala 1">
  <area shape="circle" coords="477,300,75" href="sala2.html" alt="Sala 2">
  <area shape="poly" coords="370,350,430,300,500,350,470,400" href="wejscie.html" alt="Wejście">
</map>

Mapy obrazów są przydatne w wielu kontekstach, takich jak prezentowanie interaktywnych planów, map lokalizacyjnych, schematów i infografik z odnośnikami do bardziej szczegółowych informacji.