Part 2; slide show as sequence: Create a new document, l5p2.html by copying the
ID: 3677830 • 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. Part 1; a simple slide show: Create a Web document called l5p1.html that displays one of the images from lab 2 in approximately the center of the page; centering need not be exact. Below the image, place three button elements labeled with the names of items from lab 2. (One of them must be the name of the item you chose to display.) Pressing a button should change the displayed image to that of the item named on the button. (Hint: There are at least two ways to do this that are discussed in the book. Think about the zIndex: and the visibility:property.) There is also a way that we discussed in class that's not in the book. You may use any of these three approaches, but please think about all three. Create a link to this document from your index page. In no more than a couple of paragraphs, explain which of the possible techniques you chose and why you chose it. Place your write-up below the buttons, on the same page.
Explanation / Answer
l5p1.html
<!DOCTYPE html>
<html>
<head>
<title>Lab 5 Part 1</title>
<meta charset="UTF-8">
<link rel="shortcut icon" href="http://webdev.spsu.edu/favicon.ico" type="image/x-icon" />
<script language="Javascript" type="text/javascript">
<!--
//<![CDATA[
function picture(pic) {
var s = "";
var a = "";
if(pic ==1){
s = "/fruit/raspberries.jpg";
a = "Picture of a Raspberry!";
} else if (pic == 2) {
s = "/fruit/strawberries.jpg";
a = "Picture of a Strawberry!";
} else if (pic == 3) {
s = "/fruit/oranges.jpg";
a = "Picture of an Orange!";
}
document.getElementById("fruit").src = s;
document.getElementById("fruit").alt = a;
}
//]]>
//-->
</script>
</head>
<body>
<img src="/fruit/raspberries.jpg" id="fruit" alt="Picture of a Raspberry" height="267" width="400">
<br />
<div width="400">
<button type="button">Raspberry</button>
<button type="button">Strawberry</button>
<button type="button">Orange</button>
</div>
<p>
I chose to use the do this with javascript. When the button is clicked it passes in the variable of which picture to use. This basically makes it easier on me on when I implement the next part. It also allows me to have more concise code.
</p>
</body>
</html>
l5p2.html
<!DOCTYPE html>
<html>
<head>
<title>Lab 5 Part 2</title>
<meta charset="UTF-8">
<link rel="shortcut icon" href="http://webdev.spsu.edu/favicon.ico" type="image/x-icon" />
<script language="Javascript" type="text/javascript">
<!--
//<![CDATA[
function picture() {
var s = "";
var a = "";
if(pic ==1){
s = "/fruit/raspberries.jpg";
a = "Picture of a Raspberry!";
} else if (pic == 2) {
s = "/fruit/strawberries.jpg";
a = "Picture of a Strawberry!";
} else if (pic == 3) {
s = "/fruit/oranges.jpg";
a = "Picture of an Orange!";
}
if(pic == 3){
pic = 0;
}
pic++;
document.getElementById("fruit").src = s;
document.getElementById("fruit").alt = a;
}
var pic = 2;
//]]>
//-->
</script>
</head>
<body>
<img src="/fruit/raspberries.jpg" id="fruit" alt="Picture of a Raspberry" height="267" width="400">
<br />
<div width="400">
<button type="button">Next</button>
</div>
<p>
I chose to use the do this with javascript. When the button is clicked it passes in the variable of which picture to use. This basically makes it easier on me on when I implement the next part. It also allows me to have more concise code.
</p>
</body>
</html>