Place button and point on image

Ask us anything Tips and Hacks
1

Hello everyone,
I have a small problem in weweb and I have no idea how to solve it. Maybe someone can help me.

My plan is to put a dot on a button in an image that I upload. So I uploaded the image and then I want to put a dot on a button. I then want to put a dot anywhere in the image where I click. When I have put the dot I want to have 2 more buttons where I can then enter OK and another interaction. And a cancel button. I have already tried the whole thing with ChatGtp and keep getting codes in Java and CSS but I have no idea where to enter them. I have already tried various points. But always without success. Somehow I’m running out of ideas. I have already entered the code in the button. Also in the page etc. All to no avail. Maybe one of you can help me out. I would be happy.

Um die Position des Punkts an der Stelle zu setzen, wo du auf das Bild klickst, müssen wir das Klick-Ereignis auf dem Bild verwenden, um die Koordinaten zu ermitteln und den Punkt dorthin zu bewegen.

Hier ist ein angepasster Ansatz:
HTML:

Füge einen Container für das Bild und den Punkt hinzu sowie einen Button, der das Bild in den Modus versetzt, in dem du Punkte setzen kannst.

html

div id=“image-container” style=“position: relative; display: inline-block;”
<mg id=“my-image” src=“URL_DEINES_BILDES” alt=“Bild” style=“width: 100%;”

button id="place-point-button">Punkt-Modus aktivieren</button

CSS:

Stelle sicher, dass der Punkt sichtbar ist und an der richtigen Position angezeigt wird.

css

#point {
display: none;
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
position: absolute;
}

JavaScript:

Füge die Logik hinzu, um den Punkt an die Position des Klicks auf dem Bild zu setzen.

javascript

document.getElementById(‘place-point-button’).addEventListener(‘click’, function() {
const imageContainer = document.getElementById(‘image-container’);
imageContainer.addEventListener(‘click’, function(event) {
const point = document.getElementById(‘point’);
const rect = imageContainer.getBoundingClientRect();

    // Berechnung der Klickposition relativ zum Container
    const x = event.clientX - rect.left;
    const y = event.clientY - rect.top;
    
    // Positionierung des Punkts
    point.style.left = `${x - point.offsetWidth / 2}px`;
    point.style.top = `${y - point.offsetHeight / 2}px`;
    point.style.display = 'block';
});

});