Original file was S10Lab3.tex



Lab 8

Fun with Image Rollovers and Functions

General information

1. Read the entire assignment before you start.

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

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

Labaxx.html: Rollovers With Functions

▪ Include your name, date, and section number at the top of the page using the h2 heading element. Also include your name in a comment in the body.

Note: You are to find and download images. The images must be on your X drive in a folder called: LabRollover_Images.

| |

|[pic] |

| |

Your first rollover:

• Put your image on the page

| |

|[pic]⎪ |

| |

• Use an onmouseover to change your image to the image of a very small dog by calling a function when it is moused over.

Hint: You will need two complete statements to change two images and will use

this.src and getElementById(the id goes here).src (.src is for images)

• Use onmouseout to change the image

| |

|[pic] |

| |

| |

|⎪ |

back to your image. You can call the same function.

• Next insert an h1 that contains the name of an animal.

• Insert an image of that animal below the h1.

• Write a function so that when you click on the h1 the animal changes into the picture of you and the content of the h1 changes to your name.

• Note use innerHTML with getElementById to change the text.

End of Lab8axx.html: Due at the end of lab today.

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.

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

| |

| |

| |

| |

| |

4. 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 first 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 capybara.

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 capybara).

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