Part 2; slide show as sequence: Create a new document, l5p2.html by copying the
ID: 3862523 • Letter: P
Question
Part 2; slide show as sequence: Create a new document, l5p2.html by copying the document from Part 1 and change it so that there's only one button labelled "Next". Each time the button is pressed, the next image must replace the current one. Pressing the button while the last image is displayed should return the display to the first image and start the cycle over. (Hint: You already have 90% of this done when you have completed Part 1; do not make this hard. Your want to count 0, 1, 2, 0, 1, 2, ... The modulus operator is your friend.) Create a link to this document from your index page.
Think of and describe at least two practical uses for displaying a sequence of images. Write no more than three or four paragraphs in HTML. Place your write-up below the "Next" button.
This is the code for PART 1
<!DOCTYPE html>
<html>
<head>
<title>Slide Show
</title>
</head>
<body>
<script type="text/javascript">
<!--
//<![CDATA[
function picture(pic) {
var s = "";
var a = "";
if(pic ==1){
s = "/tools/hoe.jpg";
a = "Picture of a hoe";
}
else if (pic ==2)
{
s = "/tools/c_clamps.jpg";
a = "Picture of a c clamp";
}
else if (pic ==3)
{
s = "/tools/hedge_clippers.jpg";
a = "Picture of a hedge clipper";
}
document.getElementById("tools").src = s;
document.getElementById("tools").alt = a;
}
//]]>
//-->
</script>
<img src="/tools/hoe.jpg" id="tools" alt="Picture of a hoe" height="267" width="400">
<br/>
<div>
<button type="button">hoe</button>
<button type="button">c clamp</button>
<button type="button">hedge clipper</button>
</div>
<p> I chose to use the do this with javascript because when the button is clicked it passes in the variable of which picture to use. This makes it easier when we implement the next part. It's also a way to give better streamlined code.</p>
</body>
</html>
Explanation / Answer
Included two solutions of this problem
1.The first is by putting a next button as below
<!DOCTYPE html>
<html>
<head>
<title>Slide Show
</title>
</head>
<body>
<script type="text/javascript">
<!--
//<![CDATA[
var ptr=2;
function next()
{
if(ptr ==1){
s = "/tools/hoe.jpg";
a = "Picture of a hoe";
ptr++;
}
else if (ptr ==2)
{
s = "/tools/c_clamps.jpg";
a = "Picture of a c clamp";
ptr++;
}
else if (ptr ==3)
{
s = "/tools/hedge_clippers.jpg";
a = "Picture of a hedge clipper";
ptr=1;
}
document.getElementById("tools").src = s;
document.getElementById("tools").alt = a;
}
//]]>
//-->
</script>
<img src="/tools/hoe.jpg" id="tools" alt="Picture of a hoe" height="267" width="400">
<br/>
<div>
<button type="button">NEXT</button>
</div>
<p> I chose to use the do this with javascript because when the button is clicked it passes in the variable of which picture to use. This makes it easier when we implement the next part. It's also a way to give better streamlined code.</p>
<p> There are multiple ways to do this at first we took a variable ptr to keep track on images and we incremented it in order to get next image. At third position we again make it 1 to repeat the slide show. Other way to do this by storing images in arrays and increment the respective array index as 0,1,2,0,1,2</p>
</body>
</html>
2.The Second is by keeping your code and extended a next button as below:
<!DOCTYPE html>
<html>
<head>
<title>Slide Show
</title>
</head>
<body>
<script type="text/javascript">
<!--
//<![CDATA[
var ptr=2;
function next()
{
if(ptr ==1){
s = "/tools/hoe.jpg";
a = "Picture of a hoe";
ptr++;
}
else if (ptr ==2)
{
s = "/tools/c_clamps.jpg";
a = "Picture of a c clamp";
ptr++;
}
else if (ptr ==3)
{
s = "/tools/hedge_clippers.jpg";
a = "Picture of a hedge clipper";
ptr=1;
}
document.getElementById("tools").src = s;
document.getElementById("tools").alt = a;
}
function picture(pic) {
var s = "";
var a = "";
if(pic ==1){
s = "/tools/hoe.jpg";
a = "Picture of a hoe";
ptr=2;
}
else if (pic ==2)
{
s = "/tools/c_clamps.jpg";
a = "Picture of a c clamp";
ptr=3;
}
else if (pic ==3)
{
s = "/tools/hedge_clippers.jpg";
a = "Picture of a hedge clipper";
ptr=1;
}
document.getElementById("tools").src = s;
document.getElementById("tools").alt = a;
}
//]]>
//-->
</script>
<img src="hoe.jpg" id="tools" alt="Picture of a hoe" height="267" width="400">
<br/>
<div>
<button type="button">hoe</button>
<button type="button">c clamp</button>
<button type="button">hedge clipper</button>
<button type="button">NEXT</button>
</div>
<p> I chose to use the do this with javascript because when the button is clicked it passes in the variable of which picture to use. This makes it easier when we implement the next part. It's also a way to give better streamlined code.</p>
<p> There are multiple ways to do this at first we took a variable ptr to keep track on images and we incremented it in order to get next image. At third position we again make it 1 to repeat the slide show. Other way to do this by storing images in arrays and increment the respective array index as 0,1,2,0,1,2</p>
</body>
</html>