Original file was S10Lab3.tex



Lab 8

Silly JavaScript Fun and Image Rollovers and Functions

General information

1. Read the entire assignment before you start.

2. Always bring your notes to lab.

3. Always maintain backup copies of your work. Always work from your X drive while you are in the lab and copy your work to your USB memory at the end of lab.

4. Never share your password, flash drive, or your code with anyone. Maintain the standards of academic honesty discussed in lecture and in previous labs. The work you turn in must be your work.

In this lab, you will create two web pages, lab8axx.html (due at the end of lab today) and lab8bxx.html.

As always, you will need to include a link to each of these files in the list in your All_Index.html page.

Lab8axx.html - due at the end of lab.

Your instructor will look at your code before you leave.

Remember you cannot copy / paste code from Microsoft word. So if you copy code from this document it will cause trouble.

Carefully follow the steps below to create a page that when you click on the h1 the page disappears and shows a message and when you mouse to the bottom of the new page the original page returns.

a) Using your template create a webpage that contains a div.

b) Give the body element the id of kidding.

c) Give the div the id of gone.

d) At the bottom of the page (just before the closing body tag) insert a script element.

e) In the script element insert an assignment statement to save the content of the webpage using the variable myPage.

Hint:

myPage = document.getElementById(‘kidding’).innerHTML;

We want to save it so we can bring it back after we make it disappear.

f) Inside the div, insert a silly image (not scary). Save the image in a folder named Lab8_Images

g) Below the div insert an h2 and an h3 containing some text.

h) Insert an h4 that contains your first and last name.

i) In the h2 insert an onmouseover event handler that

1. Uses an assignment statement to set the innerHTML of the body (use getElementById) to the value of the variable myPage.

2. Uses an assignment statement to set the background color of the web page to orange. Hint: document.body.style…

j) In the style element

1. set the background color of the page to orange.

2. Set the color of all em elements to the color lime.

k) Put an h1 above the div that says Watch This!

1. Use an onclick in the h1 to do the following in order given below:

• Remove the picture by setting the innerHTML of the div to text, spaces or to nothing. document.getElementById('gone').innerHTML = ‘ ’

• Change the text of the h1 to an em that says Oooh!Your page is Gone! using an assignment statement. (hint: use this.innerHTML on the left side of an assignment statement.) Example: this.innerHTML=‘ Oooh! Your page is gone!’;

• Set the background color of the page to the color black using an assignment statement. Hint: document.body.style…

Be sure to test the page.

Lab8bxx.html (Due the night before your next lab.)

1. Include a heading with your name section and today’s date.

2. Insert an image of a red flower. All images are to be saved in a folder called Lab8_Images.

3. Insert an image of a yellow flower.

4. Without using a function write the JavaScript code so that when you to mouse over the red flower, the red flower is replaced by a blue flower and the yellow flower is replaced by a purple flower.

5. Rollovers with Functions

Rollover:

| |

|[pic] |

|[pic] |

| |

• Below your headings put an image of you and an image of Cocky.

• Use a function to swap the positions of the images when the mouse is over either image. (Call the same function in the onmouseover event handler for both images. The function will load images in the appropriate positions.)

|[pic]⎪ |

|[pic] |

| |

| |

| |

|[pic] ⎪ |

|[pic] |

| |

• Swap the images back to their original positions when the mouse is moved off of the images (Use the same function and pass different values with the parameters. This function will load both of the original images.)

| |

|[pic] |

|[pic] |

|[pic] |

| |

| |

| |

| |

| |

5. Another rollover using functions:

a) Load three images of dogs and using functions with parameters do the following. (Remember you can call the same function multiple times sending the function different values.)

b) When you move the mouse over the first dog, have the third image change to a cat.

c) When you move the mouse off of the first dog, have the third image change back to the original dog.

d) When you move the mouse over the second dog, have the first image change to a picture of an giraffe .

e) When you move the mouse off of the second image, have the first image change back to the original dog.

f) When you move the mouse over the third image, have the first and second images change to images of animals (not cat, dog or giraffe).

g) When you move the mouse off of the third image have all three images change to pictures of Cocky.

• Make sure you save your completed assignment in the All_102Submissions folder.

Remember to include links to these two files in the list in your All_Index.html page.

................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download