Afbeeldingenkaart

Afbeeldingenkaart, vaak vertaald als image map, is een webtechniek waarmee delen van een afbeelding klikbaar worden gemaakt en naar verschillende bestemmingen kunnen leiden afhankelijk van waar de gebruiker klikt.

Werking en structuur: Een afbeelding krijgt het usemap-attribuut en verwijst naar een MAP-element. In die map bevinden zich AREA-elementen die een vorm beschrijven met shape (rect, circle of poly) en coordinates (coördinaten in pixels) en een href met de doellink. Elke area kan optionele alt- of title-attributen hebben om beschrijvende tekst te leveren voor gebruikers en assistive technologie.

Types en aging: Er bestaan twee hoofdtypen imagemaps. Client-side imagemaps gebruiken usemap en area in de browser om klikbare regio’s te definiëren. Server-side imagemaps maken gebruik van ism ap op de IMG-tag; klikken verzendt de coördinaten naar de server, die vervolgens beslist welk bestand teruggestuurd wordt. Het gebruik van server-side imagemaps is ouder en minder gebruikelijk in moderne ontwerpen.

Responsive ontwerp en beperkingen: De coördinaten zijn meestal gebaseerd op de oorspronkelijke afbeeldingsgrootte. Als de afbeelding schaalt, kan de geometrie van de klikbare regio’s verschuiven. Technieken om dit te verhelpen omvatten JavaScript die coördinaten herberekent bij resizing, of het vervangen van imagemaps door schaalbare opties zoals SVG of overlay-elementen.

Toepassingen en overwegingen: Afbeeldingenkaarten worden vaak gebruikt voor interactieve diagrammen, navigatieoverlays of productselectors. Voor toegankelijkheid en responsiviteit kiezen veel ontwikkelaars tegenwoordig voor alternatieven zoals SVG of interactieve frameworks, hoewel imagemaps nog breed worden ondersteund in moderne browsers.