Part 2; slide show as sequence: Create a new document, l5p2.html by copying the

ID: 3862080 • 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.

Here is most of my work for Part 1

<title>L5p1</title>
<meta charset="UTF-8">

type="image/x-icon" />
<script language="Javascript" type="text/javascript">
function picture(pic) {
var s = "";
var a = "";
if(pic ==1){
s = "/tools/c_clamps.jpg";
a = "Picture of a C Clamp!";
} else if (pic == 2) {
s = "/tools/chisels.jpg";
a = "Picture of a Chisel!";
} else if (pic == 3) {
s = "/tools/crescent_wrench.jpg";
a = "Picture of a Crescent Wrench!";
}

document.getElementById("tools").src = s;
document.getElementById("tools").alt = a;
}
</script>
</head>
<body>
<img src="/tools/c_clamps.jpg" id="tools" alt="Picture of a C Clamp"
height="267" width="400">
<br/>

<div width="400">
<button type="button"
>CClamp</button>
<button type="button">Chisels</button>
<button type="button"
>Crescent Wrench</button>
</div>

<p>
I used javascript because once the button is clicked it passes
in the variable of which picture to use. This allows for a more concise code and
makes it easier for me to develop the site.
</p>
</body>
</html>

Explanation / Answer

<title>L5p2</title>
<meta charset="UTF-8">
<link rel="shortcut icon" href="http://weblab.kennesaw.edu/~tthoma45"
type="image/x-icon" />
<script language="Javascript" type="text/javascript">
var count=0;
   function picture() {
var s = "";
var a = "";
if(count % 3 == 0){
s = "/tools/c_clamps.jpg";
a = "Picture of a C Clamp!";
} else if (count % 3 == 1) {
s = "/tools/chisels.jpg";
a = "Picture of a Chisel!";
} else if (count % 3 == 2) {
s = "/tools/crescent_wrench.jpg";
a = "Picture of a Crescent Wrench!";
}
count = count + 1;
document.getElementById("tools").src = s;
document.getElementById("tools").alt = a;
}
</script>
</head>
<body>
<img src="/tools/c_clamps.jpg" id="tools" alt="Picture of a C Clamp"
height="267" width="400">
<br/>

<div width="400">
<button type="button"
>Next>></button>
</div>
<h3>Practical Uses</h3>
<p>
       Online Shopping - Using sequence of images we can show the various product that most of the user purchased.
       They can make the appropriate selection and proceed further.
</p>

<p>
News - We can show most recent news on the top of a web page, after showing all the news we can again start with first.
</p>

<p>
Most of the colleges' website use this functionality to show the photos of cultural event, facilities provided and infrastructure of the college.
</p>
</body>
</html>

Navigate

Part 2; slide show as sequence: Create a new document, l5p2.html by copying the

Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.

Part 2; slide show as sequence: Create a new document, l5p2.html by copying the

Question

Explanation / Answer

Related Questions

Navigate