CS110Introductionsyllabusassignments documentationproject

Javascript events - RollOvers

This assignment gives you practice with Javascript events, like mouseOver, mouseOut and click. Some material that may be helpful:
  1. Lectures on Javascript events and rollovers: JavaScript Events and
  2. the corresponding lab: Lab on rollovers

How to submit this assignment

As with previous cs110 assignments, all related files should be uploaded under your protected folder, in a directory named hw6. Organize your images in a separate subfolder.

Maps as Buttons

Your task is to create a page, named hw6.html, as described below:

When the page is loaded, there are two visible images. Each one is a map of one of your favorite places (in our example, we will use a map of Australia and a map of the United States). Each one of the maps will act as a special kind of button such that:

  • Moving the mouse over the button causes a picture related to the button to appear in a previously empty part of the page. For example, moving the mouse over the USA button might cause a picture of the Grand Canyon to show up.
  • Clicking on the button replaces that newly shown picture with another picture related to the button. So, clicking on the USA button might cause the Grand Canyon picture to be replaced by a baseball picture.
  • Moving the mouse away from the button, resets the page to its initial state, i.e. with only the two maps visible.

Images for this assignment

Click here to download some images you may use. You use other images, but pay attention to their physical sizes, as you want to avoid jerky movements of objects in your page.
Have fun!

Back to the top of the page

Introduction | Syllabus | Assignments | Documentation | Project