JSFiddle - React, Tailwind, and code Playground

by Rolf

HTML

<h2>Positions-Selektierer</h2>
<p>Klicke ins Bild, um den Mausoffset ins Clipboard und unten in die Liste zu übernehmen</p>
<label>Mausoffset: <input id="wo" type="text"></label>
<br>
<section id="imgContainer">
<img id="dom" src="https://upload.wikimedia.org/wikipedia/commons/5/53/K%C3%B6lner_Dom_von_K%C3%B6ln-Deutz.jpg">
</section>
<output id="clicklist"></output>

CSS

output { display: block; white-space: pre;}
section { width: 800px; height: 600px; overflow:scroll; }

JavaScript

let inp = document.getElementById("wo");
let liste = document.getElementById("clicklist");
document.getElementById("dom").addEventListener("mousemove", function(event) {
   inp.value = event.offsetX + ","+event.offsetY;
});
document.getElementById("dom").addEventListener("click", function(event) {
   let clickPos = event.offsetX + ","+event.offsetY;
   inp.value = clickPos;
   inp.select();
   document.execCommand("copy");
   // remove selection
   inp.value = "";
   inp.value = clickPos;

   clicklist.value += clickPos + "\n";
})