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.
43 lines
1.4 KiB
HTML
43 lines
1.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>webweaving</title>
|
|
<link rel="stylesheet" href="css/style_webweave.css">
|
|
</head>
|
|
<body>
|
|
<p id="header">webweave by clicking on the image</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 startText = document.getElementById("start-text");
|
|
const header = document.getElementById("header");
|
|
const footer = document.getElementById("footer");
|
|
let currentIndex = 0;
|
|
let creditsDisplayed = false;
|
|
|
|
function showNextImage() {
|
|
if (currentIndex < 13) {
|
|
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 === 13 && !creditsDisplayed) {
|
|
startText.style.display = "block"; // Show the text 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>
|