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:
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ć usemap
atrybut:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
Wartość usemap
zaczyna 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">
name
Atrybut musi mieć taką samą wartość
<img>
jak usemap
atrybut .
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 regioncircle
- definiuje region kołowypoly
- definiuje region wielokątnydefault
- 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,44
znajdują się 34 piksele od lewego marginesu i 44 piksele od góry:
Współrzędne 270,350
znajdują się 270 pikseli od lewego marginesu i 350 pikseli od góry:
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”:
Kształt = "koło"
Aby dodać obszar okręgu, najpierw zlokalizuj współrzędne środka okręgu:
337,300
Następnie określ promień okręgu:
44
piksele
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”:
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?
Musimy znaleźć współrzędne x i y dla wszystkich krawędzi rogalika:
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”:
Mapa obrazu i JavaScript
Klikalny obszar może również wywołać funkcję JavaScript.
Dodaj click
zdarzenie 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 usemap
Uż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 .