ZuoTi.Pro
Question

for Javascript, JQuery When the page is first opened a user will see the name field...

for Javascript, JQuery

When the page is first opened a user will see the name field and the
three vacation images to the left of the page.  The page
should behave according to the following rules.

1.  When a user's mouse pointer goes over any image, that image's
border will change to be "outset 10px" and when the mouse pointer
leaves that image it's border will change to "none".


2.  When the user clicks a "Vacation" image on the left, a larger copy
of it will appear to the right of the images in the image with
an id of "currentimage" inside the "bigimage" div.  (See the HTML file)

At the same time one of the following should appear below
the "currentimage":  "Mountain Vacation", "Ocean Vacation", or "Desert Vacation"
depending on which image was selected.

TIP: Use jQuery to retrieve the ALT property of
the vacation image clicked.


3.  If a user fails to enter anything in the "First Name" text box
and then clicks the "Submit ME" button, an error message will display
to the right of the text box saying "Must enter first name".

4.  If the user has entered a first name, selected one of the
vacation images, and then clicks the "Submit ME" button
a message will appear on the bottom of the page in the
following format:

    (firstname) you want a (vacation selected) vacation

Watch the video demonstration below to see exactly
how this assignment page should work.


5.  The "Hide Image" button, when clicked, should make the Big
Image be hidden from view... and change the text of the
button to "Show Image" which, when clicked, will show
the Big Image again and change the text of the button
back to "Hide Image"

HERE IS THE HTML CODE

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
        <title>Assignment 5 - JQuery Chapter 5</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" href="JQuery_Asgn5.css">
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="JQuery_Asgn5.js"></script>
</head>

<body>

<div id="question">
        <h2>Assignment 5</h2>
        <p//>What is your first name?
        <//input type="text" id="firstname" size="30">
        <span></span>
        </p>
</div>

<div id="vacationimages">
        <p//>Click on the Image that best represents the kind of vacation you want</p>
        <p//><img src="http://profperry.com/Classes20/JQuery/mountain.jpg" alt="Mountain Vacation"><br /><br /></p>
        <p//><img src="http://profperry.com/Classes20/JQuery/desert.jpg" alt="Desert Vacation"><br /><br /></p>
        <p//><img src="http://profperry.com/Classes20/JQuery/ocean.jpg" alt="Ocean Vacation"><br /><br /></p>
</div>

<//div id="bigimage">
        <//img id="currentimage" src="http://profperry.com/Classes20/JQuery/ocean.jpg" alt="ocean vacation" width="300" height="225" border="0">
        <//p id="imagedesc"></p>
</div>

<//div id="showhidebuttondiv">
        <//input id="showhidebutton" type="button" value="Hide Image">
</div>

<//div id="submitdiv">
        <//input id="submitme" type="button" value="Submit ME">
        <//p id="mymessage"></p>
</div>

</body>
</html>
engineering   Computer-Science   
0 0
Add a comment Improve this question Transcribed image text
Next > < Previous
Sort answers by oldest

Homework Answers

Answer #1

Dear Student ,

As per the requirement submitted above , kindly find the below solution.

Here a new web page with name "Assignment5.html" is created, which contains following code.

Assignment5.html :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<!-- title for web page -->

<title>Assignment 5 - JQuery Chapter 5</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<!-- <link> is used to refer to external stylesheet -->

<link rel="stylesheet" href="JQuery_Asgn5.css">

<!-- jQuery used from CDN -->

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<!-- <script> is used to refer to external javascript file -->

<script src="JQuery_Asgn5.js"></script>

</head>

<body>

<div id="question">

<h2>Assignment 5</h2>

<p>What is your first name?

<input type="text" id="firstname" size="30">

<span></span>

</p>

</div>

<div id="vacationimages">

<p>Click on the Image that best represents the kind of vacation you want</p>

<p><img src="http://profperry.com/Classes20/JQuery/mountain.jpg" ><br /><br /></p>

<p><img src="http://profperry.com/Classes20/JQuery/desert.jpg" ><br /><br /></p>

<p><img src="http://profperry.com/Classes20/JQuery/ocean.jpg" ><br /><br /></p>

</div>

<div id="bigimage">

<img id="currentimage" src="">

<p id="imagedesc"></p>

</div>

<div id="showhidebuttondiv">

<input id="showhidebutton" type="button" value="Hide Image">

</div>

<div id="submitdiv">

<input id="submitme" type="button" value="Submit ME">

<p id="mymessage"></p>

</div>

</body>

</html>

******************************

JQuery_Asgn5.js :

$(document).ready(function () {

//this code will apply border to the selected image

$("img").mouseover(function () {

$(this).css("border", "10px outset");

});

//this code will remove border to the selected image

$("img").mouseout(function () {

$(this).css("border", "none");

});

//this code will display bigger view of image when clicked

$("img").click(function () {

$("#currentimage").attr("src", this.src);//set image src attribute

$("#imagedesc").html(this.alt);//set image description

});

//when submit button clicked , checking whether value for firstname is provided or not

$("#submitme").click(function () {

//checking whether first name is entered or not

if ($("#firstname").val() == "") {

//if first name is empty then

$("span").html("Must enter first name");//set error message

}

else {

//if first name is not empty

//show the first name and vacation details

$("#mymessage").text($("#firstname").val() + " you want a " + $("#imagedesc").text());

}

});

//when hide image button is clicked

$("#showhidebutton").click(function () {

$("#currentimage").toggle();//hide the image

if ($("#showhidebutton").val() == "Show Image") {

$("#showhidebutton").val("Hide Image");//set text

}

else {

$("#showhidebutton").val("Show Image");

}

});

})

======================================================

Output : Open web page Assignment5.html in the browser and will get the screen as shown below

Screen 1 :Assignment5.html

Screen 2:screen showing border and image when clicked

Screen 3:Screen when firstname is empty

Screen 4:Screen showing firstname and vacation details

NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.

0 0
Add a comment
Know the answer?
Add Answer to:
for Javascript, JQuery When the page is first opened a user will see the name field...
Your Answer:

Post as a guest

Your Name:

What's your source?

Earn Coins

Coins can be redeemed for fabulous gifts.

Log In

Sign Up

Not the answer you're looking for? Ask your own homework help question. Our experts will answer your question WITHIN MINUTES for Free.
Similar Homework Help Questions

  • In this problem, you will create a selectable “To Do” List. To add a task to...

    In this problem, you will create a selectable “To Do” List. To add a task to this list, the user clicks the Add Task button and enters a description of the task. To delete a task from the list, the user selects the task and then clicks the Delete Task button. Open the HTML and JavaScript files provided as start-up files (index.html from within todo_list_Q.zip file). Then, review the HTML in this file. Note, within the div element, there is...

  • URGENT HELP NEEDED: JQuery. PLEASE POST SCREEN SHOTS Task 1: Downloading jQuery Right-click the link to...

    URGENT HELP NEEDED: JQuery. PLEASE POST SCREEN SHOTS Task 1: Downloading jQuery Right-click the link to download the uncompressed latest version of jQuery Copy the jQuery.x.x.x.js file in the folder and specified as source file. Task 2: Download and install HTML-Kit 1. Navigate to htmlkit.com. 2. Click Download HTML-Kit 292. After it downloads, launch HKSetup.exe. Choose Full installation (the default) Uncheck Yes, download and install HTML-Kit Tools Trial. 6. Click Next>Finish. Task 3: Creating a Simple jQuery Application Launch HTML-Kit....

  • i'm having trouble with 1 and 3 using html, javascript and jquery 1) Change the "Search"...

    i'm having trouble with 1 and 3 using html, javascript and jquery 1) Change the "Search" link on the left to a button that when clicked, hide all the fields on the form and display the text "This is a search feature..." 3) When the user fills the form and clicks "Login", the values inputted should be displayed in the empty row (under Login) of the page. The display should be in the form: Student ID: <input value> Student Name:...

  • Hello Ive been tryting to add the CDN of jquery to my html code and I...

    Hello Ive been tryting to add the CDN of jquery to my html code and I keep getting an error Need help with this : ​​ Navigate to www.code.jquery.com in your Chrome browser. On this page, you'll find different stable versions of jQuery. Select uncompressed for jQuery Core 3.3.1. Copy the <script> tag that is given to you. In store_hours.html, paste that tag directly above your body's closing tag. This is the jQuery CDN. After you paste this code into...

  • I am trying to create a slide show using JavaScript. This is what I have so...

    I am trying to create a slide show using JavaScript. This is what I have so far: HTML: <!DOCTYPE html> <html lang="en"> <head>    <meta charset="utf-8"> <title>Slide Show</title> <link rel="stylesheet" href="main.css"> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <script src="slide_show.js"></script> </head> <body> <section> <h1>Fishing Slide Show</h1> <ul id="image_list"> <li><a href="images/casting1.jpg" title="Casting on the Upper Kings"></a></li> <li><a href="images/casting2.jpg" title="Casting on the Lower Kings"></a></li> <li><a href="images/catchrelease.jpg" title="Catch and Release on the Big Horn"></a></li> <li><a href="images/fish.jpg" title="Catching on the South Fork"></a></li> <li><a href="images/lures.jpg" title="The Lures for Catching"></a></li> </ul>...

  • How do i make my html show 10 results per page, and how do i make...

    How do i make my html show 10 results per page, and how do i make the books clickable to show results about them? <!DOCTYPE html> <html> <head> <title>Google Books Search</title> <script src="https://code.jquery.com/jquery-2.1.4.min.js"> </script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> <style> body{ background:lightblue } .wrap{ max-width:400px; margin:auto; margin-top:10px; } .pagination, pagination-last{ float:left; } a{ text-decoration:none; padding:15px 20px; border:1px solid black; border-right:none; background:#f2f2f2; font-size:18px; font-weight:bold; } .pagination-last a{ border-right:1px solid black; } a:hover { background:orange; color;white; } </style> <!-- <script src="js/main.js"></script> --> <script> function B_Search()...

  • //--------// // Events // //--------// console.log("Events"); // 1. Change the link (the <a> tag) in the...

    //--------// // Events // //--------// console.log("Events"); // 1. Change the link (the <a> tag) in the HTML body below such that a hello // message is displayed on a click event. //--------------// // Input Fields // //--------------// console.log("Input Fields"); // 1. Change the background color to red for the input text field (the <input> // tag) in the HTML body when obtaining the focus and change it back to // white when the focus is lost. // 2. Read the...

  • Task 3: Creating a Simple jQuery Application 1. Launch HTML-Kit. 2. Create a new HTML file...

    Task 3: Creating a Simple jQuery Application 1. Launch HTML-Kit. 2. Create a new HTML file and save it as nnLab8.htm. 3. Add the following HTML to the file: <!DOCTYPE HTML> <html> <head> <title>Hello World - jQuery Style</title> </head> <body> <div id="first"></div> <div id="second"></div> <a href="#" id="link">Click Me!</a><br /> <span id="greeting"></span> </body> </html> 4. Add the following<script> element to the<head> section. NOTE: Use the jQuery version number that matches the file name of the file you downloaded in Step 1....

  • HTML: ch14 IC_1B - use a fadeToggle to control jQuery to show the second part of...

    HTML: ch14 IC_1B - use a fadeToggle to control jQuery to show the second part of the content on Chp 14 slide 33. <!DOCTYPE html> <html lang="en"> <head>    <title> jQuery </title>    <meta charset="utf-8">    <style>        #details { display: none; }    </style>       <xxxx src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></xxxx>       </head> <body>    <h1>jQuery</h1>        <p>Many websites, including Amazon and Google, use jQuery, to provide interaction and dynamic effects on web pages.        <a href="#" id="more">...

  • Consider the attached Registration form. Use jQuery to: 1) Change the "Search" link on the left...

    Consider the attached Registration form. Use jQuery to: 1) Change the "Search" link on the left to a button that when clicked, hide all the fields on the form and display the text "This is a search feature..." 2) Display "required" in every input field upon loading the page 3) When the user fills the form and clicks "Login", the values inputted should be displayed in the empty row (under Login) of the page. The display should be in the...

ADVERTISEMENT
Free Homework Help App
Download From Google Play
Scan Your Homework
to Get Instant Free Answers
Need Online Homework Help?
Ask a Question
Get Answers For Free
Most questions answered within 3 hours.
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT