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 |