Vielen Dank für die Anregung!
Ich habe mittlerweile einen Code gebastelt. Meine Image Map soll später mal aus drei anklickbaren Areas bestehen, die nach dem gleichen Prinzip hochzählen. Ich habe der Einfachheit halber mich erstmal an einer Area versucht. Meine Variable im Datensatz zählt leider nicht hoch, wenn ich auf die Area klicke (weißer Kreis links oben in meinem Fragebogen:
https://sosci.zdv.uni-mainz.de/zukunft/). Die interne Variable IV01 liegt auf der Fragebogenseite vor dem Code.
<style>
#wrapper{ position: relative; font-family: Arial, Helvetica, sans-serif; }
#natureImage{ display: block; width: 100%; }
</style>
<div id="wrapper">
<img id="natureImage" src=Interaktiv1.png usemap="#natureMap" alt="" />
<map name="natureMap" id="natureMap">
<area id="abc" coords="1385,261,116" shape="circle" href="javascript:countclickabc()"/>
<area id="def" coords="380,957,116" shape="circle" href="">
<area id="ghi" coords="1150,1840,116" shape="circle" href="">
</map>
</div>
<script>
// Ausgangswert für Zählvariable ist Null
let countabc = 0;
// Klicks für die Area abc registrieren und Funktion ansteuern
var clickabc = document.getElementById('abc');
clickabc.addEventListener('click', countclickabc);
// Hochzählen, wenn auf die Area abc geklickt wird
function countclickabc() {
countabc += 1;
};
// Das versteckte Eingabefeld identifizieren
var inputabc = document.getElementById("IV01_01");
// Den Wert hineinschreiben
inputabc.value = countabc;
</script>