document.addEventListener("DOMContentLoaded", function () {
    // Hauptbild-Element
    var mainImg = document.getElementById("mainImgElement");
  
    // Bereich, der angeklickt werden soll
    var clickArea = { x: 200, y: 450, width: 200, height: 200 };
  
    // Funktion zum Einfügen des neuen Bildes
    function insertNewImage(x, y) {
      // Hier kannst du die Logik für das Einfügen des Bildes implementieren
      // In diesem Beispiel wird ein einfaches Overlay-Bild erstellt
      var overlayImage = document.createElement("img");
      overlayImage.src = "Grafikkarte.jpg";
      overlayImage.classList.add("overlayImage");
      overlayImage.style.left = 150% + "px";
      overlayImage.style.top = 200 + "px";
      document.body.appendChild(overlayImage);
    }
  
    // Klick-Ereignis für das Hauptbild
    mainImg.addEventListener("click", function (event) {
        
      var clickX = event.clientX - mainImg.offsetLeft;
      var clickY = event.clientY - mainImg.offsetTop;
  
      // Überprüfen, ob der Klick im definierten Bereich liegt
      if (
        clickX >= clickArea.x &&
        clickX <= clickArea.x + clickArea.width &&
        clickY >= clickArea.y &&
        clickY <= clickArea.y + clickArea.height 
      ) {
        // Ein neues Bild einfügen
        insertNewImage(clickX, clickY);
      }
    });
  });

  function insertImage() {
    alert('Button wurde geklickt!');
    // Hier kannst du weitere Aktionen ausführen, z.B. das Bild ändern oder andere Funktionen aufrufen.
  }