This is my code. But I need help with the following: - I have 5 images. When I p
ID: 3706348 • Letter: T
Question
This is my code. But I need help with the following:
- I have 5 images. When I press next on the fourth image, the fifth image won't show.
- I want to re-size the image.
- Add text at the bottom of each image.
Please help me.
<html>
<head>
<title>HTML and JavaScript</title>
<script>
var imgArray = new Array(6);
var index = 0;
function doBack()
{
if (index > 0)
{
index--;
document.slideshow.src = imgArray[index].src;
}
return;
}
function doNext()
{
if (index < 3)
{
index++;
document.slideshow.src = imgArray[index].src;
}
return;
}
function startup()
{
imgArray[0] = new Image;
imgArray[0].src = "https://images.unsplash.com/photo-1486578077620-8a022ddd481f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=85550af4293fee2c13a9754e45eb8a52&w=1000&q=80";
imgArray[1] = new Image;
imgArray[1].src = "https://www.earthrangers.com/content/wildwire/male_lion_grassland.jpg";
imgArray[2] = new Image;
imgArray[2].src = "http://assets.worldwildlife.org/photos/907/images/story_full_width/sumatran-tiger-hero_92514619.jpg?1345581518";
imgArray[3] = new Image;
imgArray[3].src = "http://assets.worldwildlife.org/photos/11048/images/story_full_width/rsz_namibia_will_burrard_lucas_wwf_us_2.jpg?1461768823";
imgArray[4] = new Image;
imgArray[4].src = "https://cdn3.volusion.com/kapts.nrbqf/v/vspfiles/photos/ALLIGATOR114-2.jpg?1496409148";
return;
}
</script>
</head>
<body>
<div align="center">
<h2>The 5 Exotic Animals</h2>
<p>
<img name="slideshow" src="https://images.unsplash.com/photo-1486578077620-8a022ddd481f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=85550af4293fee2c13a9754e45eb8a52&w=1000&q=80">
</p>
<p>
<a href="#">Back</a>
<a href="#">Next</a>
</p>
</div>
</body>
</html>
Explanation / Answer
<html>
<head>
<title>HTML and JavaScript</title>
</head>
<body>
<div align="center">
<h2>The 5 Exotic Animals</h2>
<p>
<img name="slideshow" src="https://images.unsplash.com/photo-1486578077620-8a022ddd481f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=85550af4293fee2c13a9754e45eb8a52&w=1000&q=80"
>
</p>
<p id="textP">
Eagle
</p>
<p>
<Button>Back</Button>
<button href="#">Next</button>
</p>
</div>
<script>
var imgArray = new Array(6);
var descArray = new Array(6)
var index = 0;
function doBack()
{
if (index > 0)
{
index--;
document.slideshow.src = imgArray[index].src;
document.getElementById("textP").innerHTML = descArray[index];
}
return;
}
function doNext()
{
if (index < 4)
{
index++;
document.slideshow.src = imgArray[index].src;
document.getElementById("textP").innerHTML = descArray[index];
}
return;
}
function startup()
{
imgArray[0] = new Image;
imgArray[0].src = "https://images.unsplash.com/photo-1486578077620-8a022ddd481f?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=85550af4293fee2c13a9754e45eb8a52&w=1000&q=80";;
descArray[0] ="Eagle";
imgArray[1] = new Image;
descArray[1] ="Lion";
imgArray[1].src = "https://www.earthrangers.com/content/wildwire/male_lion_grassland.jpg";
imgArray[2] = new Image;
descArray[2] ="Tiger";
imgArray[2].src = "http://assets.worldwildlife.org/photos/907/images/story_full_width/sumatran-tiger-hero_92514619.jpg?1345581518";
imgArray[3] = new Image;
descArray[3] ="Elephant";
imgArray[3].src = "http://assets.worldwildlife.org/photos/11048/images/story_full_width/rsz_namibia_will_burrard_lucas_wwf_us_2.jpg?1461768823";
descArray[4] ="Crocodile";
imgArray[4] = new Image;
imgArray[4].src = "https://cdn3.volusion.com/kapts.nrbqf/v/vspfiles/photos/ALLIGATOR114-2.jpg?1496409148";
return;
}
startup();
</script>
</body>
</html>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.