Neu
|
|
@ -0,0 +1,6 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
|
<project version="4">
|
||||||
|
<component name="VcsDirectoryMappings">
|
||||||
|
<mapping directory="" vcs="Git" />
|
||||||
|
</component>
|
||||||
|
</project>
|
||||||
|
After Width: | Height: | Size: 3.3 MiB |
|
After Width: | Height: | Size: 2.8 MiB |
|
After Width: | Height: | Size: 3.1 MiB |
|
After Width: | Height: | Size: 3.3 MiB |
|
After Width: | Height: | Size: 3.6 MiB |
|
After Width: | Height: | Size: 3.4 MiB |
|
After Width: | Height: | Size: 3.8 MiB |
|
After Width: | Height: | Size: 2.0 MiB |
|
After Width: | Height: | Size: 3.6 MiB |
|
|
@ -0,0 +1,44 @@
|
||||||
|
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.
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -0,0 +1,81 @@
|
||||||
|
body{
|
||||||
|
height: 100%;
|
||||||
|
background-image: linear-gradient(to right, rgba(21, 45, 70, 0.192), rgba(40, 16, 63, 0.671)), url(Setup.jpg);
|
||||||
|
background-size: cover;
|
||||||
|
background-attachment: fixed;
|
||||||
|
}
|
||||||
|
.myh{
|
||||||
|
font-size: 200%;
|
||||||
|
text-decoration: underline;
|
||||||
|
text-align:center;
|
||||||
|
letter-spacing: 2pt;
|
||||||
|
|
||||||
|
color: rgb(255, 115, 0);
|
||||||
|
}
|
||||||
|
#mainImage {
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 200px;
|
||||||
|
margin-left: 63%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlayImage {
|
||||||
|
position: absolute;
|
||||||
|
width: 300px;
|
||||||
|
height: 150px;
|
||||||
|
top: 600;
|
||||||
|
left: 400;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
margin: 200;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-container {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 1000px; /* Ändere die Breite und Höhe entsprechend deinem Bild */
|
||||||
|
height: 1000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay-image {
|
||||||
|
margin-top: 0%;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
S
|
||||||
|
.overlay-container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overlay {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(117, 15, 15, 0.582); /* Ändere die Hintergrundfarbe und die Deckkraft nach Bedarf */
|
||||||
|
transform-origin: 0 0;
|
||||||
|
transform: skewY(-10deg); /* Ändere den Winkel des schrägen Overlays */
|
||||||
|
z-index: 1; /* Stelle sicher, dass das Overlay über dem Bild liegt */
|
||||||
|
}
|
||||||
|
#image-container {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#insertedImage {
|
||||||
|
width: 100%; /* Beispiel: Das Bild nimmt die volle Breite des Containers ein */
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
#insertButton {
|
||||||
|
position: absolute;
|
||||||
|
top: 50px; /* Beispiel: Der Button befindet sich 50 Pixel von oben */
|
||||||
|
left: 100px; /* Beispiel: Der Button befindet sich 100 Pixel von links */
|
||||||
|
background-color: black;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
z-index: 1; /* Damit der Button über dem Bild erscheint */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
|
@ -0,0 +1,32 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="de">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Computer Setup</title>
|
||||||
|
<link rel="stylesheet" type="text/css" href="Gestaltung.css">
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<h1 class="myh">Mein Computer</h1>
|
||||||
|
<div id="image-container">
|
||||||
|
<img id="insertedImage" src="Pc-Blue.jpg" alt="Inserted Image">
|
||||||
|
<button id="insertButton" onclick="insertImage()">Insert Image</button>
|
||||||
|
</div>
|
||||||
|
<div id="mainImage">
|
||||||
|
<img src="PC Gaming Setup.jpg" alt="Hauptbild" id="mainImgElement">
|
||||||
|
</div>
|
||||||
|
<div class="image-container overlay-container">
|
||||||
|
<img src="Fireshield PC.jpg" alt="Dein Bild" class="overlay-image">
|
||||||
|
<div class="overlay"></div>
|
||||||
|
</div>
|
||||||
|
<!-- <div id="image-container">
|
||||||
|
<img id="insertedImage" src="Pc-Blue.jpg" alt="Inserted Image">
|
||||||
|
<button id="insertButton" onclick="insertImage()">Insert Image</button>
|
||||||
|
</div>-->
|
||||||
|
|
||||||
|
<script src="Funktion.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
After Width: | Height: | Size: 83 KiB |
|
After Width: | Height: | Size: 148 KiB |
|
After Width: | Height: | Size: 3.4 MiB |
|
After Width: | Height: | Size: 120 KiB |