You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

42 lines
1.3 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>webweave</title>
<link rel="stylesheet" href="css/style_webweave.css">
</head>
<body>
<p id="header">webweave by clicking on a comment</p>
<div id="image-container"></div>
</body>
<p id="footer">credits for the webweaving go to sea--shore.tumblr.com</p>
<script>
const imageContainer = document.getElementById("image-container");
const header = document.getElementById("header");
const footer = document.getElementById("footer");
let currentIndex = 0;
let creditsDisplayed = false;
function showNextImage() {
if (currentIndex < 8) {
const image = document.createElement("img");
image.src = `images/web${currentIndex}.jpg`;
image.alt = `Image ${currentIndex}`;
imageContainer.appendChild(image);
currentIndex++;
// Add a click event to each image to show the next one
image.addEventListener("click", showNextImage);
}
if (currentIndex === 8 && !creditsDisplayed) {
header.style.display = "none"; // Hide the header when all images are displayed.
footer.style.display = "block"; // Show the footer text at the bottom
creditsDisplayed = true;
}
}
// Initialize by clicking on the first image
showNextImage();
</script>
</html>