44 lines
1.5 KiB
JavaScript
44 lines
1.5 KiB
JavaScript
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.
|
|
}
|
|
|
|
|