Question

In: Computer Science

Part 1; a simple slide show: Create a Web document called l5p1.html that displays one of...

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.) You may use any of these approaches, but please think about all of them. 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.

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.

Solutions

Expert Solution

Program screenshots:

Part a):

Sample output:

Code to be copied:

l5p1.html

<!--This script is used to create a slider-->

<!DOCTYPE html>

<!--Html tag-->

<html lang="en">

<head>

    <meta charset="utf-8" />

    <!--Title of the page-->

    <title>Slide Show tools</title>

    <!--Css-->

    <style type="text/css">

        img {

            position: absolute;

            z-index: -1;

        }

        button {

            height: 30px;

            width: 197px;

        }

    </style>

    <!--javascript-->

    <script>

        //Create a fucntion to show the images

        function showTool(imgId)

        {

            var a = "";

            if (imgId == "img1")

            {

                //set the text content to the paragraph

                a = "Saw used to cut the material and these Handsaws"

                    + " have been around for thousands of years.\n"

                     + "Egyptian hieroglyphics exist depicting ancient\n "

                     + "woodworkers sawing boards into pieces.\n";

                document.getElementById("sample").innerHTML = a;

            }

            //If the image id is img2

           else if (imgId == "img2")

            {

                document.getElementById("img2").style.zIndex = -1;

                //set the text content to the paragraph

                a = "Pliers are made in various shapes and sizes and for many uses."

                   + " Some are used for gripping something round like a pipe or rods."

                   + " Some are used for twisting wires";

                document.getElementById("sample").innerHTML = a;

            }

          else if (imgId == "img3")

            {

              document.getElementById("img3").style.zIndex = -1;

              //set the text content to the paragraph

              a = "Pitchfork is an agricultural tool with a long handle and tynes used "

              +"to lift and pitch or throw loose material, such as hay, straw or leaves.";

              document.getElementById("sample").innerHTML = a;

          }

            // Assign the z-index values

            //to the images using the image id's

            document.getElementById("img1").style.zIndex = -1;

            document.getElementById("img2").style.zIndex = -1;

            document.getElementById("img3").style.zIndex = -1;

            document.getElementById(imgId).style.zIndex = 1;

        }

    </script>

</head>

<body>

    <!--Create a div-->

    <div style="position:absolute; margin-left:30%">

        <!--Create image tags-->

        <img src="saw.jpg" id="img1" width="600" height="400" />

        <img src="pliers.jpg" width="600" height="400" id="img2" />

        <img src="pitchfork.jpg" width="600" height="400" id="img3" />

    </div>

    <div style="position:absolute; margin-top:400px; margin-left:30%">

        <!--Create buttons-->

        <button onclick="showTool('img1')">SAW</button>

        <button onclick="showTool('img2')">PLIERS</button>

        <button onclick="showTool('img3')">PITCH FORK</button>

        <br></br>

        <p id="sample">These are the Sample tools used to cut the material click on the buttons</p>

    </div>

</body>

</html>

part 2:

Sample output:

Code to be copied:

l5p2.html

<!--This script is used to create a slider-->

<!DOCTYPE html>

<!--Html tag-->

<html lang="en">

<head>

    <meta charset="utf-8" />

    <!--Title of the page-->

    <title>Slide show</title>

    <!--Css-->

    <style type="text/css">

        img {

            position: absolute;

            z-index: -1;

        }

        button {

            height: 30px;

            width: 600px;

            position: absolute;

            z-index: -1;

        }

    </style>

    <!--javascript-->

    <script>

        //Create a fucntion to show the images

        function showTool(imgId,btnId)

        {

            //create a variable to display the text

            var a = "";

            //If the image id is 1

            if (imgId == "img1")

            {

                //set the text content to the paragraph

                a = "Saw used to cut the material and these Handsaws"

                    + " have been around for thousands of years.\n"

                     + "Egyptian hieroglyphics exist depicting ancient\n"

                     + "woodworkers sawing boards into pieces.\n";

                document.getElementById("sample").innerHTML = a;

            }

            else if (imgId == "img2")

            {

                a = "Pliers are made in various shapes and sizes and for many uses."

                     + " Some are used for gripping something round like a pipe or rods."

                        + " Some are used for twisting wires.";

                document.getElementById("sample").innerHTML = a;

            }

            else if (imgId == "img3")

            {

                //set the text content to the paragraph

                a = "Pitchfork is an agricultural tool with a long handle and tynes used "

                + "to lift and pitch or throw loose material, such as hay, straw or leaves.";

                document.getElementById("sample").innerHTML = a;

            }

            // Assign the z-index values to the images using the image id's

            document.getElementById("img1").style.zIndex = -1;

            document.getElementById("img2").style.zIndex = -1;

            document.getElementById("img3").style.zIndex = -1;

            document.getElementById(imgId).style.zIndex = 1;

            // Assign the z-index values to the buttons using the button id's

            document.getElementById("btn1").style.zIndex = -1;         

            document.getElementById("btn2").style.zIndex = -1;

            document.getElementById("btn3").style.zIndex = -1;

            document.getElementById(btnId).style.zIndex = 1;

        }

    </script>

</head>

<body>

    <!--Create a div for images-->

    <div style="position:absolute; margin-left:30%">

        <!--Create image tags-->

        <img src="saw.jpg" id="img1" width="600" height="400" />

        <img src="pliers.jpg" width="600" height="400" id="img2" />

        <img src="pitchfork.jpg" width="600" height="400" id="img3" />

    </div>

    <!--Create a div for button and paragraph-->

    <div style="position:absolute; margin-top:400px; margin-left:30%">

        <!--Create buttons-->

        <button onclick="showTool('img2', 'btn2')" id="btn1">Next</button>

        <button onclick="showTool('img3', 'btn3')" id="btn2">Next</button>

        <button onclick="showTool('img1', 'btn1')" id="btn3">Next</button>

        <br>

        <p id="sample" align="center">These are the tools used to cut the material</p>

    </div>

</body>

</html>

venereology answered 2 years ago
Next > < Previous

Related Solutions

1. An HTML document that’s generated by a web application is a ________________________ web page. 2....
1. An HTML document that’s generated by a web application is a ________________________ web page. 2. An easy way to log the progress of an application in Chrome’s Console panel is to insert __________________ methods at critical points in the code. 3. The childNodes property of a DOM object returns a/an ______________________ of the child nodes for that object. 4. The ___________________ method of an array can be used to concatenate the elements of the array into a single string.​...
2. HTML/CSS/JavaScript Under 'project’ create a subdirectory titled ‘travelsite’. Create a slide show for a travel...
2. HTML/CSS/JavaScript Under 'project’ create a subdirectory titled ‘travelsite’. Create a slide show for a travel and tourism company. Use between 8 and 12 pictures that will automatically change every 1 to 3 seconds. You may use the pictures from Assignment 1 and add more to the collection. The slide show will have the following features: Use a background image. The pictures must use a type of ‘transition’ ie Fade in/Fade out when the pictures change. Each picture must include...
Week 4 Assignment HTML – Creating a Simple Web Page “HTML or HyperText Markup Language as...
Week 4 Assignment HTML – Creating a Simple Web Page “HTML or HyperText Markup Language as it is formally known is the main markup language for creating web pages and other information that can be displayed in a webbrowser”. It was created by Tim Berners-Lee in 1989 as a user friendly way of sharing information on the Internet. http://en.wikipedia.org/wiki/HTML Assignment Instructions - Create a simple HTML Web Page that includes hyperlinks to three of your favorite websites. Use the online...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any...
Create a Web Page Using HTML, CSS, JS, jQuery • Create a web profile, including any of the following: • Your hobbies, likes/dislikes, career aspirations, dream job, favorite animals/ pets, favorite superhero, etc. • You do not have to share personal information that you are uncomfortable with sharing. Follow these guidelines when creating your page: • Include at least one heading (h1, h2, etc.) in your web page. • Provide a quote from a book, movie, etc. • Include at...
Create a web application for a daily planner in HTML. Please include testing in the files...
Create a web application for a daily planner in HTML. Please include testing in the files and show correct code formatting.
Create a Home Page using HTML and CSS Part 1 • Contain an image or logo...
Create a Home Page using HTML and CSS Part 1 • Contain an image or logo about your website. • Must contain three navigation links. Home link. Registration link. Animations link. • Footer will contain links to web pages to any other site you wish (just be outside your webpage, like YouTube,etc.) Open links in new tab, not current tab. Create a Registration page: • Registration Fields: 1) User Name - Input Text 2) Password - Input Password 3) Repeat...
Make a modest or simple Web page using Python flask. The basic components of HTML should...
Make a modest or simple Web page using Python flask. The basic components of HTML should be included. The Web page should have at least 3 Headings(<h1>), paragraph (<p>), comments (<!-- -->), ordered list, unordered list, three links to website, and should display time & date. Example: <html>     <head>         <title>Page Title</title>     </head> <body>     ..new page content.. </body> </html>
Create a web page using PHP and HTML that contains a list of movie names available...
Create a web page using PHP and HTML that contains a list of movie names available for rent (at least 10 movies), so that each time you visit the home page, you see a different order of movies in the list. The movie names are required. 2) The rental price for each movie ranges between $1.99 to $7.99. • Create an associative array with a code for the movie as the key (e.g., movie1, movie2, etc.) and the associated rental...
Create a simple video conferencing web app (P2P or WebRTC). Needs to handle more than one-on-one...
Create a simple video conferencing web app (P2P or WebRTC). Needs to handle more than one-on-one communication and should have option to screen share as well. (prefer not to use sockets if possible. But if needed then that works too)
Create a simple video conferencing web app (P2P or WebRTC). Needs to handle more than one-on-one...
Create a simple video conferencing web app (P2P or WebRTC). Needs to handle more than one-on-one communication and should have option to screen share as well. (prefer not to use sockets if possible. But if needed then that works too)
ADVERTISEMENT
Subjects
ADVERTISEMENT
Latest Questions
ADVERTISEMENT