Naar de inhoud
Gratis naslagwerk over HTML
HTML leren en naslaan
Naslag / Afbeeldingen en media

Het element <area>

Het <area>-HTML-element definieert een gebied binnen een image map dat vooraf gedefinieerde klikbare zones heeft. Een image map maakt het mogelijk om geometrische gebieden op een afbeelding te koppelen aan hyperlinks.

Code
<map name="infographic">
  <area
    shape="poly"
    coords="129,0,260,95,129,138"
    href="https://voorbeeld.nl/docs/Web/HTTP"
    alt="HTTP" />
  <area
    shape="poly"
    coords="260,96,209,249,130,138"
    href="https://voorbeeld.nl/docs/Web/HTML"
    alt="HTML" />
  <area
    shape="poly"
    coords="209,249,49,249,130,139"
    href="https://voorbeeld.nl/docs/Web/JavaScript"
    alt="JavaScript" />
  <area
    shape="poly"
    coords="48,249,0,96,129,138"
    href="https://voorbeeld.nl/docs/Web/API"
    alt="Web APIs" />
  <area
    shape="poly"
    coords="0,95,128,0,128,137"
    href="https://voorbeeld.nl/docs/Web/CSS"
    alt="CSS" />
</map>
<img
  usemap="#infographic"
  src="/shared-assets/images/examples/voorbeeld.png"
  alt="infographic" />
Resultaat in de browser

Attributen

De attributen van dit element omvatten de globale attributen.

alt

Een alternatieve tekststring om weer te geven in browsers die geen afbeeldingen tonen. De tekst moet zo geformuleerd zijn dat deze de gebruiker dezelfde soort keuze biedt als de afbeelding zou bieden wanneer die zonder alternatieve tekst wordt weergegeven. Dit attribuut is alleen vereist als het href-attribuut wordt gebruikt.

coords

Het coords-attribuut geeft de coördinaten aan van het shape-attribuut, wat betreft grootte, vorm en plaatsing van een <area>. Dit attribuut mag niet worden gebruikt als shape is ingesteld op default.

  • rect: de waarde is x1,y1,x2,y2. De waarde specificeert de coördinaten van de linkerbovenhoek en rechterbenedenhoek van de rechthoek. Bijvoorbeeld, in <area shape="rect" coords="0,0,253,27" href="#" target="_blank" alt="Voorbeeld"> zijn de coördinaten 0,0 en 253,27, wat respectievelijk de linkerboven- en rechterbenedenhoek van de rechthoek aangeeft.
  • circle: de waarde is x,y,radius. De waarde specificeert de coördinaten van het middelpunt van de cirkel en de straal. Bijvoorbeeld: <area shape="circle" coords="130,136,60" href="#" target="_blank" alt="Voorbeeldlogo">
  • poly: de waarde is x1,y1,x2,y2,..,xn,yn. De waarde specificeert de coördinaten van de hoekpunten van de veelhoek. Als het eerste en laatste coördinatenpaar niet gelijk zijn, voegt de browser het laatste coördinatenpaar toe om de veelhoek te sluiten

De waarden zijn getallen in CSS-pixels. Onze shape-generator kan je helpen bij het genereren van de coords-syntax door punten te selecteren op een afbeelding die je uploadt.

download

Dit attribuut geeft, indien aanwezig, aan dat de gelinkte bron bedoeld is om gedownload te worden in plaats van in de browser te worden weergegeven. Zie <a> voor een volledige beschrijving van het download-attribuut.

href

Het hyperlinkdoel voor het gebied. De waarde is een geldige URL. Dit attribuut mag worden weggelaten; als dat gebeurt, vertegenwoordigt het <area>-element geen hyperlink.

interestfor Experimenteel Niet-standaard

Definieert het <area>-element als een interest invoker. De waarde is de id van het doelelement, dat op een bepaalde manier wordt beïnvloed (meestal getoond of verborgen) wanneer interesse wordt getoond in of verloren gaat op het aanroepende element (bijvoorbeeld door erover te hoveren/weg te hoveren of het te focussen/de focus te verliezen). Zie Interest invokers gebruiken voor meer details en voorbeelden.

ping

Bevat een door spaties gescheiden lijst van URL's waarnaar, wanneer de hyperlink wordt gevolgd, POST-verzoeken met de body PING door de browser worden verzonden (op de achtergrond). Wordt meestal gebruikt voor tracking.

referrerpolicy

Een string die aangeeft welke referrer moet worden gebruikt bij het ophalen van de bron:
  • no-referrer: De Referer-header wordt niet verzonden.
  • no-referrer-when-downgrade: De Referer-header wordt niet verzonden naar origins zonder TLS (HTTPS).
  • origin: De verzonden referrer wordt beperkt tot de oorsprong van de verwijzende pagina: het schema, de host en de port.
  • origin-when-cross-origin: De referrer die naar andere oorsprongen wordt verzonden, wordt beperkt tot het schema, de host en de poort. Navigaties binnen dezelfde oorsprong bevatten nog steeds het pad.
  • same-origin: Er wordt een referrer verzonden voor dezelfde oorsprong, maar cross-origin-verzoeken bevatten geen referrer-informatie.
  • strict-origin: Verzend alleen de oorsprong van het document als referrer wanneer het beveiligingsniveau van het protocol gelijk blijft (HTTPS→HTTPS), maar verzend deze niet naar een minder veilige bestemming (HTTPS→HTTP).
  • strict-origin-when-cross-origin (standaard): Verzend een volledige URL bij een verzoek binnen dezelfde oorsprong, verzend alleen de oorsprong wanneer het beveiligingsniveau van het protocol gelijk blijft (HTTPS→HTTPS), en verzend geen header naar een minder veilige bestemming (HTTPS→HTTP).
  • unsafe-url: De referrer bevat de oorsprong en het pad (maar niet het fragment, het wachtwoord of de gebruikersnaam). Deze waarde is onveilig, omdat deze oorsprongen en paden van TLS-beveiligde bronnen lekt naar onveilige oorsprongen.

rel

Voor anchors met het href-attribuut specificeert dit attribuut de relatie van het doelobject tot het linkobject. De waarde is een door spaties gescheiden lijst van linktypen. De waarden en hun betekenis worden geregistreerd door een bepaalde instantie die betekenis kan hebben voor de auteur van het document. De standaardrelatie, als er geen andere wordt opgegeven, is nul (void). Gebruik dit attribuut alleen als het href-attribuut aanwezig is.

shape

De vorm van het bijbehorende hotspotgebied. De HTML-specificaties definiëren de waarden rect, die een rechthoekig gebied definieert; circle, die een cirkelvormig gebied definieert; poly, die een veelhoek definieert; en default, die het volledige gebied buiten eventuele gedefinieerde vormen aangeeft.

target

Een sleutelwoord of een door de auteur gedefinieerde naam van de browsing context waarin de gelinkte bron moet worden weergegeven. De volgende sleutelwoorden hebben een speciale betekenis:

  • _self (standaard): Toon de bron in de huidige browsing context.
  • _blank: Toon de bron in een nieuwe, naamloze browsing context.
  • _parent: Toon de bron in de bovenliggende browsing context van de huidige, als de huidige pagina zich in een frame bevindt. Als er geen bovenliggende context is, gedraagt dit zich hetzelfde als _self.
  • _top: Toon de bron in de bovenste browsing context (de browsing context die een voorouder is van de huidige en geen bovenliggende context heeft). Als er geen bovenliggende context is, gedraagt dit zich hetzelfde als _self.

Gebruik dit attribuut alleen als het href-attribuut aanwezig is.

Opmerking

Het instellen van target="_blank" op <area>-elementen zorgt impliciet voor hetzelfde gedrag als het instellen van rel="noopener", waarbij window.opener niet wordt ingesteld. Zie browsercompatibiliteit voor de ondersteuningsstatus.

Voorbeelden

Afbeelding met klikbare gebieden

HTML
<map name="primary">
  <area
    shape="circle"
    coords="75,75,75"
    href="left.html"
    alt="Click to go Left" />
  <area
    shape="circle"
    coords="275,75,75"
    href="right.html"
    alt="Click to go Right" />
</map>
<img
  usemap="#primary"
  src="https://dummyimage.com/350x150"
  alt="350 x 150 pic" />
Resultaat in de browser

Technische samenvatting

Inhoudscategorieën Flow content, phrasing content.
Toegestane inhoud Geen; het is een void element.
Weglaten van tags Moet een begintag hebben en mag geen eindtag hebben.
Toegestane oudertags Elk element dat phrasing content accepteert. Het <area>-element moet een <map>-voorouder hebben, maar dit hoeft niet de directe ouder te zijn.
Impliciete ARIA-rol link wanneer het href-attribuut aanwezig is, anders generic
Toegestane ARIA-rollen Geen role toegestaan
DOM-interface HTMLAreaElement

Verwante elementen