Slide show as sequence: Create a new document, l5p2.html by copying the code fro
ID: 3593899 • Letter: S
Question
Slide show as sequence: Create a new document, l5p2.html by copying the code from Part 1 and change it so that there's only one button labelled "Next".
Part one code is [
<!DOCTYPE html>
<head>
<title>Slide Show</title>
<style type="text/css">
.show{display:block;
}
.hide{display:none;
}
.center {
margin: auto;
width: 30%;
padding: 10px;
}
</style>
<script type="text/javascript">
function showImg1()
{
var obj = document.getElementById('Saw');
obj.className = 'show';
var obj = document.getElementById('Pliers');
obj.className = 'hide';
var obj = document.getElementById('Hedge_clippers');
obj.className = 'hide';
}
function showImg2()
{
var obj = document.getElementById('Pliers');
obj.className = 'show';
var obj = document.getElementById('Hedge_clippers');
obj.className = 'hide';
var obj = document.getElementById('Saw');
obj.className = 'hide';
}
function showImg3()
{
var obj = document.getElementById('Hedge_clippers');
obj.className = 'show';
var obj = document.getElementById('Saw');
obj.className = 'hide';
var obj = document.getElementById('Pliers');
obj.className = 'hide';
}
</script>
<body>
<div class="center">
<img id="Saw" src="/tools/saw.jpg" class="show" alt="saw img" >
<img id="Pliers" src="/tools/pliers.jpg" class="hide" alt="pliers img" >
<img id="Hedge_clippers" src="/tools/hedge_clippers.jpg" class="hide" alt="Hedge clipper img" >
<input type="button" value= "Saw">
<input type="button" value= "Pliers">
<input type="button" value= "Hedge clippers">
</div>
<p>
I have used css technique and javascript to override the code of the css when click on the
button it runs the onclick function of the javascript to change the css property to hide the
picture using css property. When u run the html file it will calls the css property of the
class="show" of first image and for two calls the class="hide"see the code in show and
hide property there is hide and show code for the image.
After that when u click on button it will calls the onclick() javascript function to change the
class name of the tag from show to hide.
</p>
</body>
</html>]
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.)
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.
Explanation / Answer
<!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>
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.