HTML- afbeeldingskaarten
Met HTML-afbeeldingskaarten kunt u klikbare gebieden op een afbeelding maken.
Afbeeldingskaarten
De HTML <map>-tag definieert een imagemap. Een imagemap is een afbeelding met aanklikbare gebieden. De gebieden worden gedefinieerd met een of meer <area>tags.
Probeer in onderstaande afbeelding op de computer, telefoon of het kopje koffie te klikken:
Voorbeeld
Hier is de HTML-broncode voor de afbeeldingskaart hierboven:
<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>
Hoe werkt het?
Het idee achter een image map is dat je verschillende acties moet kunnen uitvoeren, afhankelijk van waar in de afbeelding je klikt.
Om een image map te maken heb je een afbeelding nodig, en wat HTML code die de klikbare gebieden beschrijft.
De afbeelding
De afbeelding wordt ingevoegd met behulp van de <img>tag. Het enige verschil met andere afbeeldingen is dat je een usemapattribuut moet toevoegen:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
De usemapwaarde begint met een hash-tag
#gevolgd door de naam van de imagemap en wordt gebruikt om een relatie te leggen tussen de afbeelding en de imagemap.
Tip: U kunt elke afbeelding als afbeeldingskaart gebruiken!
Afbeeldingskaart maken
Voeg vervolgens een <map>element toe.
Het <map>element wordt gebruikt om een afbeeldingskaart te maken en wordt aan de afbeelding gekoppeld door het vereiste name
attribuut te gebruiken:
<map name="workmap">
Het nameattribuut moet dezelfde waarde hebben als het
attribuut <img>'s usemap.
De gebieden
Voeg vervolgens de klikbare gebieden toe.
Een klikbaar gebied wordt gedefinieerd met behulp van een <area>element.
Vorm geven aan
U moet de vorm van het klikbare gebied definiëren en u kunt een van deze waarden kiezen:
rect- definieert een rechthoekig gebiedcircle- definieert een cirkelvormig gebiedpoly- definieert een veelhoekig gebieddefault- definieert de hele regio
U moet ook enkele coördinaten definiëren om het aanklikbare gebied op de afbeelding te kunnen plaatsen.
Vorm = "recht"
De coördinaten voor shape="rect"komen in paren, één voor de x-as en één voor de y-as.
De coördinaten 34,44bevinden zich dus 34 pixels vanaf de linkermarge en 44 pixels vanaf de bovenkant:
De coördinaten 270,350bevinden zich 270 pixels vanaf de linkermarge en 350 pixels vanaf de bovenkant:
Nu hebben we genoeg gegevens om een klikbaar rechthoekig gebied te maken:
Voorbeeld
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
Dit is het gebied dat klikbaar wordt en de gebruiker naar de pagina "computer.htm" stuurt:
Vorm = "cirkel"
Om een cirkelgebied toe te voegen, zoekt u eerst de coördinaten van het middelpunt van de cirkel:
337,300
Geef vervolgens de straal van de cirkel op:
44pixels
Nu heb je genoeg gegevens om een aanklikbaar cirkelvormig gebied te maken:
Voorbeeld
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
Dit is het gebied dat klikbaar wordt en de gebruiker naar de pagina "coffee.htm" stuurt:
Vorm = "poly"
Het shape="poly"bevat verschillende coördinaatpunten, waardoor een vorm ontstaat die is gevormd met rechte lijnen (een polygoon).
Hiermee kan elke vorm worden gemaakt.
Zoals misschien een croissantvorm!
Hoe kunnen we van de croissant in onderstaande afbeelding een klikbare link maken?
We moeten de x- en y-coördinaten voor alle randen van de croissant vinden:
De coördinaten komen in paren, één voor de x-as en één voor de y-as:
Voorbeeld
<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">
Dit is het gebied dat klikbaar wordt en de gebruiker naar de pagina "croissant.htm" stuurt:
Afbeeldingskaart en JavaScript
Een klikbaar gebied kan ook een JavaScript-functie activeren.
Voeg een clickgebeurtenis toe aan het <area>element om een JavaScript-functie uit te voeren:
Voorbeeld
Hier gebruiken we het attribuut onclick om een JavaScript-functie uit te voeren wanneer op het gebied wordt geklikt:
<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>
Hoofdstuk samenvatting
- Gebruik het HTML
<map>-element om een imagemap te definiëren - Gebruik het HTML
<area>-element om de klikbare gebieden in de imagemap te definiëren - Gebruik het HTML -
usemapattribuut van het<img>element om naar een imagemap te verwijzen
HTML-afbeeldingstags
| 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 |
Bezoek onze HTML Tag Reference voor een volledige lijst van alle beschikbare HTML-tags .