I have successfully created a slideshow of images using JavaScript.
<html>
<head>
<script language="JavaScript">
var i = 0;
var path = new Array();
path[0] = "one.jpg";
path[1] = "two.jpg";
function swapImage() {
document.slide.src = path[i];
if(i < path.length - 1) {
i++;
} else {
i = 0;
}
setTimeout("swapImage()", 3000);
}
window.onload=swapImage;
</script>
</head>
<body>
<img height="200" name="slide" src="image_1.gif" width="400" />
</body>
</html>
Now, I want to enhance the slideshow by adding text overlays onto each image. The first text will say "Good Day" and should appear on the first image, while the second text will say "Bad Day" and should be displayed on the second image.
However, I am facing a challenge in implementing this feature. I am unsure about how to start "sliding images along with text" as intended.
The desired output is to have the images accompanied by the following text:
"This is a caption"
Please guide me on how to achieve this combined image and text display in my slideshow.