Een plaatje van bijvoorbeeld je bureau waarop een computer, een telefoon en een koffiekop. Als je op een van die drie onderdelen klikt komt er informatie over dat onderdeel tevoorschijn. Om dat in HTML te doen is redelijk eenvoudig. Het voorbeeld dat ik hier net beschreef kunt u vinden bij W3Schools onder de verschillende namen, waaronder “HTML map”. De werking is eenvoudig: naast het plaatje definieert men objecten, zoals een rechthoek, een cirkel of een veelhoek, met behulp van coördinaten binnen het plaatje. Zodra binnen zo’n vlakje geklikt wordt kan de software een gewenste actie uitvoeren

Nu kan de gebruiker binnen een WordPress pagina of bericht een HTML-blok openen waar hij iets als hierboven beschreven neerzet. Maar helaas, dat werkt niet goed. De reden is eenvoudig: een plaatje wordt door WordPress van grootte veranderd, “geschaald”, zodat het goed op de pagina kan passen. Maar daardoor veranderen de afstanden binnen het plaatje ook en de coördinaten die gebruikt werden om klikbare vlakjes te definiëren liggen dan ergens anders of buiten het plaatje!

Nu zijn er allerlei gratis en betaalde hulpprogrammaatjes (“plugin’s”) die dat probleem voor je willen aanpakken. Ik heb er een paar geprobeerd en die werkten héél slecht of helemaal niet. Dat hielp niet natuurlijk.

Al verder zoekende stuitte ik op SVG’s, Scalable Vector Graphics. Een plaatje bestaat dan uit elementen die ieder afzonderlijk coördinaten hebben in plaats van een rij beeldpunten waarbij hun positie in de rij bepaalt waar ze terecht moeten komen. Zou het daarmee kunnen?

Het antwoord is ja, dat kan en zelfs bijna net zo eenvoudig als met HTML alleen. Een eenvoudig voorbeeld hieronder:

<svg viewBox="0 0 1086 898">

  <image xlink:href="https://erfgoed-zeldenrust.nl/wp-content/uploads/2024/11/00-Overzicht.jpg" x="0" y="0" height="100%" width="100%"/>

  <a xlink:href="#tekening-1">
    <circle r="12" cx="323" cy="418" stroke="green" stroke-width="3" fill="none"/>
    <circle r="12" cx="323" cy="418" fill="white" opacity="0.1"/>
  </a>

:
:
:
  <a xlink:href="#tekening-35">
    <circle r="12" cx="234" cy="784" stroke="green" stroke-width="3" fill="none" />
    <circle r="12" cx="234" cy="784" fill="white" opacity="0.1" />
  </a>

</svg>

Zo kon ik een 100 jaar oude kaart uit een boekje van de tekenaar Leo K Zeldenrust klikbaar maken, daar is bovenstaand voorbeeld van. Op de kaart staan 35 stippen die verwijzen naar de tekeningen die in het boekje volgen. Wilt u het resultaat zien? Dat kan hier.

Hoe het werkt? De eerste regel geeft het geheim al weer. De viewBox bepaalt de coördinaten binnen het plaatje, hoe groot WordPress ook het plaatje daadwerkelijk maakt. Het plaatje zelf wordt geladen in de volgende regel, met een <img ...>-statement. Dan worden de vlakjes gedefinieerd als twee cirkels: een groen randje en het midden bijna transparant, beiden klikbaar. Na de definitie van de 35 vlakjes komt er nog een afsluitende regel. Dat is het!

Ik was blij dat ik nog even verder gezocht had …