ZuoTi.Pro
Question

I need help incorporating javascript into my page. The Lessons page has a message box (not...

I need help incorporating javascript into my page. The Lessons page has a message box (not an alert box) that becomes visible/invisible when the mouse is moved over/off the small, red hyperlink on the last line that says, "note." The note is 10pt, red, and italic. The message box contains the text, "Students who pre-pay for the entire term will have the registration fee waved." It is 150px wide, with an "azure" background and a black border. It has 5px padding all the way around, and is positioned relatively at approximately 450px down and 300px to the left

How can I incorporate this into my HTML code:

<html>

<head>

<!--

New Perspectives on HTML and XHTML 5th Edition

Additional Cases

Case 1

Filename: lessons.htm

Supporting files: tstyles.css, ynlogo.jpg, ystyles.css

-->

<title>Young Notes Music Lessons</title>

<link href="ystyles.css" rel="stylesheet" type="text/css" />

<link href="tstyles.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="pageContent">

<h1 id="head">

<img src="ynlogo.jpg" alt="Young Notes" />

</h1>

<ul id="links">

<li><a href="young.htm">Home</a><a/></li>

<li><a href="lessons.htm">Lessons</a><a/></li>

<li><a href="staff.htm">Our Staff</a></a></li>

<li><a href="events.htm">Upcoming Events</a></li>

<li><a href="application.htm">Application</a></li>

</ul>

<div id="main">

<h2>Lessons</h2>

<p>Weekly private lessons are 30, 45, or 60 minutes in length. Priority

scheduling is given to current students and enrollments received before

August 1st. Enrollment is on-going and tuition is pro-rated for a

mid-year start.</p>

<p>Tuition includes 29 private lessons and 5 ensemble experiences from

September through June (see our calendar for exact dates). There are

two payment options available-Monthly and Semester. Monthly payments

are due the 1st of each month from August through May. Semester payments are

discounted and are due August 1st and January 1st. A late fee is applied

for past due accounts on the 7th of the month. Students beginning study

mid-year will have their tuition prorated.</p>

<p>It is the goal of Young Notes that no student be unable to study the

arts due to financial challenges. Our Scholarship Program provides financial

assistance to students who are unable to pay full tuition.</p>

<table>

<colgroup>

<col class="firstCol" />

<col class="feeColums" span="2" />

</colgroup>

<thead>

<tr> <th>Lesson</th>

<th>Per Term</th>

<th>Per Year</th>

</tr></thead>

<tbody>

<tr> <td>30 Minutes</td>

<td>45 Minutes</td>

<td>60 Minutes</td>

</tr><tr>

<td>$600</td>

<td>$800</td>

<td>$1100</td>

</tr><tr>

<td>$1100</td>

<td>$1600</td>

<td>$2100</td>

</tr></tbody></table>

<p>All students pay an annual registration fee: $30/person, $45/family.</p>

</div>

<address id="footer">

Young Notes &#183;

175 South Avenue &#183;

Brownwood, TX 76801 &#183;

(325) 555 - 0155 &#183;

[email protected]

</address>

</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

I have altered the HTML that you shared in question to add the message box div element and also added a text as note. with the style that you mentioned iin question

I have added the below HTML code to show a div element with the message content and in the hypher link with text note. has the onmouseover and onmouseout event

In javascript i have added two functions onmouseover and onmouseout which shows the message box when mouse hovered on hyperlink and hides the message box when mouse moved out of the hyperlink

The full html, javascript and css content is given below.

The codes that i have added are highlighted in bolder text

******************HTML, CSS & JAVASCRIPT******************

<html>

<head>

<!--

New Perspectives on HTML and XHTML 5th Edition

Additional Cases

Case 1

Filename: lessons.htm

Supporting files: tstyles.css, ynlogo.jpg, ystyles.css

-->

<title>Young Notes Music Lessons</title>

<link href="ystyles.css" rel="stylesheet" type="text/css" />

<link href="tstyles.css" rel="stylesheet" type="text/css" />

<style type="text/css">

.note

{

font-size:10pt;

color:red;

font-style:italic;

}

.messageBox

{

display:none;

overflow: hidden;

width:150px;

background:#007FFF;

padding:5px;

position:relative;

bottom:450px; left: 300px;

}

</style>

<script type="text/javascript">

function showNote()

{

document.getElementById("messageBox").style.display = "block";

}

function hideNote()

{

document.getElementById("messageBox").style.display = "none";

}

</script>

</head>

<body>

<div id="pageContent">

<h1 id="head">

<img src="ynlogo.jpg" alt="Young Notes" />

</h1>

<ul id="links">

<li><a href="young.htm">Home</a><a/></li>

<li><a href="lessons.htm">Lessons</a><a/></li>

<li><a href="staff.htm">Our Staff</a></a></li>

<li><a href="events.htm">Upcoming Events</a></li>

<li><a href="application.htm">Application</a></li>

</ul>

<div id="main">

<h2>Lessons</h2>

<p>Weekly private lessons are 30, 45, or 60 minutes in length. Priority

scheduling is given to current students and enrollments received before

August 1st. Enrollment is on-going and tuition is pro-rated for a

mid-year start.</p>

<p>Tuition includes 29 private lessons and 5 ensemble experiences from

September through June (see our calendar for exact dates). There are

two payment options available-Monthly and Semester. Monthly payments

are due the 1st of each month from August through May. Semester payments are

discounted and are due August 1st and January 1st. A late fee is applied

for past due accounts on the 7th of the month. Students beginning study

mid-year will have their tuition prorated.</p>

<p>It is the goal of Young Notes that no student be unable to study the

arts due to financial challenges. Our Scholarship Program provides financial

assistance to students who are unable to pay full tuition.</p>

<table>

<colgroup>

<col class="firstCol" />

<col class="feeColums" span="2" />

</colgroup>

<thead>

<tr> <th>Lesson</th>

<th>Per Term</th>

<th>Per Year</th>

</tr></thead>

<tbody>

<tr> <td>30 Minutes</td>

<td>45 Minutes</td>

<td>60 Minutes</td>

</tr><tr>

<td>$600</td>

<td>$800</td>

<td>$1100</td>

</tr><tr>

<td>$1100</td>

<td>$1600</td>

<td>$2100</td>

</tr></tbody></table>

<p>All students pay an annual registration fee: $30/person, $45/family.

<a class="note" href="#" onmouseover="showNote();" onmouseout="hideNote()";>note.</a>

</p>

</div>

<address id="footer">

Young Notes &#183;

175 South Avenue &#183;

Brownwood, TX 76801 &#183;

(325) 555 - 0155 &#183;

[email protected]

</address>

</div>

<div id="messageBox" class="messageBox">

<p>Students who pre-pay for the entire term will have the registration fee waved.</p>

</div>

</body>

</html>

******************END*****************

Below is the browser output

Output Screen

Without mouse hover

/messagebox.html Young Notes Home Lessons Our Staff Upcoming Events ·Application Lessons Weekly private lessons are 30, 45, o

With mouse hover

essagebox.html Young Notes Home Lessons Our Staff Upcoming Events Application Students who pre-pay for the entire term will a

0 0
Add a comment
Know the answer?
Add Answer to:
I need help incorporating javascript into my page. The Lessons page has a message box (not...
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

  • Kindly assist in fixing the error i got when I pasted my codes to validate it....

    Kindly assist in fixing the error i got when I pasted my codes to validate it. The error is in bold. Error: Table column 2 established by element th has no cells beginning in it. From line 53, column 25; to line 55, column 40 <tr> <th colspan="2"> <!DOCTYPE HTML> <html lang="en"><!-- language is English-->    <head>    <meta charset="utf-8"/>    <title>DA Website</title>    <link rel="stylesheet" type="text/css" href="styles.css" />    </head>    <body>    <div id="wrapper">    <!-- start html...

  • 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...

  • How to make all the buttons work using javascript? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta...

    How to make all the buttons work using javascript? <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script> function openAccount() { /* - get the account and initial amount values - check that all necessary information is provided - call the setCookie function to create account */ } function Deposit() { /* - get the account and amount values - check that all necessary information is provided - alter cookie with current amount of deposit */ } function...

  • I need help with my javascript project, I've started on it but I can't seem to...

    I need help with my javascript project, I've started on it but I can't seem to get ym java scripts to work with my index.html. Can someone please help me fix my code? I need the main.js & scratchpad.js to work with my index.html .Thank you Directions: Go to the following link: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics On that page, scroll down to "A 'hello world' example". Follow the step-by-step instructions to download their code and edit it in your text editor of choice....

  • I have to make a pixel art maker using javascript. HTML and CSS were already provided....

    I have to make a pixel art maker using javascript. HTML and CSS were already provided. I only had to do the JavaScript part. Every time I run the HTML folder nothing happens when I choose the width, height, and color. This is my code: (ONLY JS IS SUPPOSED TO BE FIXED). JS: // Select color input // Select size input const colorPicker = document.getElementsById('colorPicker'); const rowNum = document.getElementsById('inputHeight'); const cellNum = document.getElementById('inputWidth'); const pixelCanvas = document.getElementById('pixelCanvas'); const form =...

  • I cant seem to get the CSS at the bottom of this HTML to work. <!doctype...

    I cant seem to get the CSS at the bottom of this HTML to work. <!doctype html> <html lang="en"> <head> <!--Madison McCuiston--> <meta charset="utf-8"> <title>Amelie Boulangerie</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <header>Amelie Boulangerie</header> <!-- change this to header tag --> <nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="pastries.html">Pastries</a></li> <li><a href="events.html">Events</a></li> <li><a href="contact.html">Contact</a></li> </ul> </nav> <main> <H2>Experience the Difference</H2> <p><span class="bakery">Amelie Boulangerie</span> is the master of flavor combinations.The jewel-colored macarons come in the most tempting of flavors. Experience the difference...

  • JAVASCRIPT/JQUERY Hello I would like some help understanding jQuery. Here are the directions: Write a program...

    JAVASCRIPT/JQUERY Hello I would like some help understanding jQuery. Here are the directions: Write a program that creates the following table: Course Course Name Day Time IMS115 Windows 10 Monday 6 PM IMS215 Office 2016 Wednesday 5 PM MIS200 Java Thursday 9 AM MTH105 Business Math Saturday 10 AM Using jQuery, select every other odd row and change the font color to blue and make it bold. And here is my code: Chapter4.html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="Chapter4.css">...

  • Hello please, don't use your handwriting in the solution Thank you In Page Layout Strategies, we ...

    Hello please, don't use your handwriting in the solution Thank you In Page Layout Strategies, we talked about fluid and fixed layouts. If I was given the below code. Does that fluid or fixed layouts, and how did you indicate that? Explain your answer <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Mount Olympus News</title> <style type="text/css"> #wrapper {             width: 960px;             outline: #ff7900 2px dashed; } #main {             float: left;             width: 650px;             margin: 0 20px;            ...

  • Hello please, don't use your handwriting in the solution Thank you In Page Layout Strategies, we...

    Hello please, don't use your handwriting in the solution Thank you In Page Layout Strategies, we talked about fluid and fixed layouts. If I was given the below code. Does that fluid or fixed layouts, and how did you indicate that? Explain your answer <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head> <title>Mount Olympus News</title> <style type="text/css"> #wrapper {             width: 960px;             outline: #ff7900 2px dashed; } #main {             float: left;            ...

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