HTML obrázkové mapy
Pomocí obrázkových map HTML můžete na obrázku vytvářet oblasti, na které lze kliknout.
Obrazové mapy
Značka HTML <map>definuje obrazovou mapu. Obrazová mapa je obrázek s klikacími oblastmi. Oblasti jsou definovány jedním nebo více <area>tagy.
Zkuste kliknout na počítač, telefon nebo šálek kávy na obrázku níže:
Příklad
Zde je zdrojový kód HTML pro obrázkovou mapu výše:
<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 funguje?
Myšlenkou obrázkové mapy je, že byste měli být schopni provádět různé akce v závislosti na tom, kde na obrázku kliknete.
K vytvoření obrázkové mapy potřebujete obrázek a nějaký HTML kód, který popisuje oblasti, na které lze kliknout.
Obrázek
Obrázek se vloží pomocí <img>značky. Jediný rozdíl od ostatních obrázků je v tom, že musíte přidat usemapatribut:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
Hodnota usemapzačíná hash tagem
#následovaným názvem obrazové mapy a používá se k vytvoření vztahu mezi obrázkem a obrazovou mapou.
Tip: Jako obrazovou mapu můžete použít jakýkoli obrázek!
Vytvořte obrazovou mapu
Poté přidejte <map>prvek.
Prvek <map>se používá k vytvoření obrázkové mapy a je spojen s obrázkem pomocí požadovaného name
atributu:
<map name="workmap">
Atribut namemusí mít stejnou hodnotu jako
atribut <img>'s usemap.
Oblasti
Poté přidejte oblasti, na které lze kliknout.
Oblast, na kterou lze kliknout, je definována pomocí <area>prvku.
Tvar
Musíte definovat tvar oblasti, na kterou lze kliknout, a můžete si vybrat jednu z těchto hodnot:
rect- definuje obdélníkovou oblastcircle- definuje kruhovou oblastpoly- definuje polygonální oblastdefault- definuje celý region
Musíte také definovat některé souřadnice, abyste mohli umístit oblast, na kterou lze kliknout, na obrázek.
Shape="rect"
Souřadnice pro shape="rect"jsou ve dvojicích, jedna pro osu x a jedna pro osu y.
Souřadnice 34,44jsou tedy umístěny 34 pixelů od levého okraje a 44 pixelů od horního okraje:
Souřadnice 270,350jsou umístěny 270 pixelů od levého okraje a 350 pixelů od horního okraje:
Nyní máme dostatek dat k vytvoření klikací obdélníkové oblasti:
Příklad
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
Toto je oblast, na kterou lze kliknout a přesměruje uživatele na stránku „computer.htm“:
Shape="kruh"
Chcete-li přidat oblast kruhu, nejprve vyhledejte souřadnice středu kruhu:
337,300
Poté zadejte poloměr kruhu:
44 pixelů
Nyní máte dostatek dat k vytvoření klikací kruhové oblasti:
Příklad
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
Toto je oblast, na kterou lze kliknout a přesměruje uživatele na stránku „coffee.htm“:
Shape="poly"
shape="poly"Obsahuje několik souřadnicových bodů, což vytváří tvar tvořený přímkami (polygon) .
Toho lze použít k vytvoření libovolného tvaru.
Třeba ve tvaru croissantu!
Jak můžeme udělat z croissantu na obrázku níže odkaz, na který lze kliknout?
Musíme najít souřadnice x a y pro všechny hrany rohlíku:
Souřadnice jsou ve dvojicích, jedna pro osu x a jedna pro osu y:
Příklad
<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">
Toto je oblast, na kterou lze kliknout a přesměruje uživatele na stránku „croissant.htm“:
Obrazová mapa a JavaScript
Oblast, na kterou lze kliknout, může také spustit funkci JavaScriptu.
Chcete-li provést funkci JavaScriptu, přidejte clickdo prvku událost :<area>
Příklad
Zde používáme atribut onclick ke spuštění funkce JavaScriptu po kliknutí na oblast:
<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>
Shrnutí kapitoly
- Pomocí elementu HTML
<map>definujte obrazovou mapu - Pomocí elementu HTML
<area>definujte klikací oblasti v obrazové mapě - Chcete-li ukázat na obrázkovou mapu, použijte
usemapatribut HTML prvku<img>
HTML značky obrázků
| 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 |
Úplný seznam všech dostupných značek HTML naleznete v naší Referenční příručce značek HTML .