My current project involves creating an interactive collage where users can click around and have pictures pop up at the clicked location. The functionality works as intended, but now I'm facing issues with the navigation bar not being clickable. Additionally, using images in CSS for this collage is causing some unintended effects on other parts of my website.
const images = [
"collage1.webp", "collage2.jpg", "collage3.jpg", "collage4.jpg", "collage5.jpg", "collage6.jpg"
]
let i = 0
function placeImage(x, y) {
const nextImage = images[i]
const img = document.createElement("img")
img.setAttribute("src", nextImage)
img.style.left = x + "px"
img.style.top = y + "px"
img.style.transform = "translate(-50%, -50%) scale(0.5) rotate(" + (Math.random() * 20 - 10) + "deg)"
document.body.appendChild(img)
i = i + 1
if (i >= images.length) {
i = 0
}
}
document.addEventListener("click", function(event) {
event.preventDefault()
placeImage(event.pageX, event.pageY)
})
document.addEventListener("touchend", function(event) {
event.preventDefault()
placeImage(event.pageX, event.pageY)
})body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
color: white;
background-image: url("background3.jpg");
}
.topnav {
overflow: hidden;
/*background-color: #214a63;*/
/*#0A1128*/
/*display:flex;*/
justify-content: left;
align-items: left;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #4db1f0;
color: white;
}
/*test for favicon menu item*/
.topnav a.split {
float: right;
padding: 14px 16px;
}
#footer {
position: fixed;
bottom: 0;
left: 0;
}
#wrap {
min-height: 100%;
}
#wrapper {
width: 600px;
margin: 80px auto;
text-align: center;
}
h1 {
text-align: center;
}
/*
img {
width: 400px;
height: auto;
}*/
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
/*for floating selfie*/
.flier.self {
width: 400px;
height: auto;
}
/*for linked in logo*/
.linkedin {
height: 40px;
width: auto;
}
/* for the about me page (looks good but gets rid of linked in image and cant click tabs)*/
@keyframes fadein {
0% {
opacity: 0;
}
100% {
opacity: 100;
}
}
img {
position: absolute;
top: 500px;
left: 400px;
transform: translate(-50%, -50%) scale(0.5);
animation: fadein 0.5;
}<body>
<div class="topnav">
<a href="index.html">Home</a>
<a class="active" href="#aboutMe">About Me</a>
<a href="vacation.html">Vacation Spots</a>
<a href="eightBall.html">Magic Eight Ball</a>
<a href="dog.html">My Dog</a>
<a href="linked in goes here" target="_blank" class="split"> <img src="LI-In-Bug.png" class="linkedin"></a>
</div>
<h1>About Me</h1>
<script src="collage.js"></script>
</body>