Samouczek HTML

Strona główna HTML Wprowadzenie do HTML Edytory HTML Podstawy HTML Elementy HTML Atrybuty HTML Nagłówki HTML Akapity HTML Style HTML Formatowanie HTML Cytaty HTML Komentarze HTML Kolory HTML HTML CSS Linki HTML Obrazy HTML Ulubione HTML Tabele HTML Listy HTML Blok HTML i wbudowany Klasy HTML Identyfikator HTML Ramki HTML HTML JavaScript Ścieżki plików HTML Nagłówek HTML Układ HTML HTML Responsywne Kod komputerowy HTML Semantyka HTML Przewodnik po stylach HTML Jednostki HTML Symbole HTML Emotikony HTML Zestaw znaków HTML Kodowanie adresu URL HTML HTML a XHTML

Formularze HTML

Formularze HTML Atrybuty formularza HTML Elementy formularza HTML Typy danych wejściowych HTML Atrybuty wejściowe HTML Atrybuty formularza wejściowego HTML

Grafika HTML

Płótno HTML HTML SVG

Media HTML

Media HTML Wideo HTML Dźwięk HTML Wtyczki HTML HTML YouTube

API HTML

Geolokalizacja HTML Przeciągnij/upuść HTML Magazyn sieciowy HTML HTML Web Workers HTML SSE

Przykłady HTML

Przykłady HTML Quiz HTML Ćwiczenia HTML Certyfikat HTML Podsumowanie HTML Dostępność HTML

Odniesienia HTML

Lista znaczników HTML Atrybuty HTML Globalne atrybuty HTML Obsługa przeglądarki HTML Zdarzenia HTML Kolory HTML Płótno HTML HTML audio/wideo Dokumenty HTML Zestawy znaków HTML Kodowanie adresu URL HTML Kody językowe HTML Wiadomości HTTP Metody HTTP Konwerter PX na EM Skróty klawiszowe

Mapy obrazów HTML


Dzięki mapom obrazu HTML możesz tworzyć na obrazie obszary, które można kliknąć.


Mapy obrazów

Znacznik HTML <map>definiuje mapę obrazu. Mapa obrazu to obraz z obszarami, które można kliknąć. Obszary są definiowane za pomocą co najmniej jednej <area>etykiety.

Spróbuj kliknąć komputer, telefon lub filiżankę kawy na poniższym obrazku:

Miejsce pracy Sun Mercury Venus

Przykład

Oto kod źródłowy HTML powyższej mapy obrazu:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>

Jak to działa?

Ideą mapy obrazu jest to, że powinieneś być w stanie wykonywać różne działania w zależności od tego, gdzie klikniesz na obrazie.

Aby utworzyć mapę obrazu, potrzebujesz obrazu i kodu HTML, który opisuje obszary, na które można kliknąć.



Obraz

Obraz jest wstawiany za pomocą <img>tagu. Jedyna różnica w porównaniu z innymi obrazami polega na tym, że musisz dodać usemapatrybut:

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

Wartość usemapzaczyna się od tagu hash, #po którym następuje nazwa mapy obrazu i służy do tworzenia relacji między obrazem a mapą obrazu.

Wskazówka: możesz użyć dowolnego obrazu jako mapy obrazu!


Utwórz mapę obrazu

Następnie dodaj <map>element.

Element <map>służy do tworzenia mapy obrazu i jest połączony z obrazem za pomocą wymaganego name atrybutu:

<map name="workmap">

nameAtrybut musi mieć taką samą wartość <img>jak usemapatrybut .


Obszary

Następnie dodaj klikalne obszary.

Klikalny obszar jest definiowany za pomocą <area>elementu.

Kształt

Musisz zdefiniować kształt obszaru klikalnego i możesz wybrać jedną z tych wartości:

  • rect - definiuje prostokątny region
  • circle - definiuje region kołowy
  • poly - definiuje region wielokątny
  • default - definiuje cały region

Musisz również zdefiniować pewne współrzędne, aby móc umieścić obszar, na który można kliknąć, na obrazie. 


Kształt = "prosty"

Współrzędne dla shape="rect"przychodzą parami, jedna dla osi x i jedna dla osi y.

Tak więc współrzędne 34,44znajdują się 34 piksele od lewego marginesu i 44 piksele od góry:

Miejsce pracy

Współrzędne 270,350znajdują się 270 pikseli od lewego marginesu i 350 pikseli od góry:

Miejsce pracy

Teraz mamy wystarczająco dużo danych, aby utworzyć klikalny prostokątny obszar:

Przykład

<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">

Jest to obszar, który staje się klikalny i przekieruje użytkownika na stronę „komputer.htm”:

Miejsce pracy

Kształt = "koło"

Aby dodać obszar okręgu, najpierw zlokalizuj współrzędne środka okręgu:

337,300

Miejsce pracy

Następnie określ promień okręgu:

44 piksele

Miejsce pracy

Teraz masz wystarczająco dużo danych, aby utworzyć klikalny okrągły obszar:

Przykład

<area shape="circle" coords="337, 300, 44" href="coffee.htm">

Jest to obszar, który staje się klikalny i przekieruje użytkownika na stronę „kawa.htm”:

Miejsce pracy

Kształt = "wielo"

Zawiera kilka punktów współrzędnych, co tworzy kształt utworzony z linii prostych ( shape="poly"wielokąt).

Można to wykorzystać do stworzenia dowolnego kształtu.

Jak może kształt rogalika!

Jak sprawić, by rogalik na obrazku poniżej stał się klikalnym linkiem?

Francuskie jedzenie

Musimy znaleźć współrzędne x i y dla wszystkich krawędzi rogalika:

Francuskie jedzenie

Współrzędne występują w parach, jedna dla osi x i jedna dla osi y:

Przykład

<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">

Jest to obszar, który staje się klikalny i przekieruje użytkownika na stronę „croissant.htm”:

Francuskie jedzenie

Mapa obrazu i JavaScript

Klikalny obszar może również wywołać funkcję JavaScript.

Dodaj clickzdarzenie do <area>elementu, aby wykonać funkcję JavaScript:

Przykład

Tutaj używamy atrybutu onclick, aby wykonać funkcję JavaScript po kliknięciu obszaru:

<map name="workmap">
  <area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">
</map>

<script>
function myFunction() {
  alert("You clicked the coffee cup!");
}
</script>

Podsumowanie rozdziału

  • Użyj elementu HTML <map>, aby zdefiniować mapę obrazu
  • Użyj <area>elementu HTML, aby zdefiniować klikalne obszary na mapie obrazu
  • usemapUżyj atrybutu HTML <img>elementu, aby wskazać mapę obrazu

Tagi obrazu HTML

Tag Description
<img> Defines an image
<map> Defines an image map
<area> Defines a clickable area inside an image map
<picture> Defines a container for multiple image resources

Pełną listę wszystkich dostępnych tagów HTML można znaleźć w naszym podręczniku HTML Tag Reference .