Rollovers

Objectives

  • Handle mouse rollovers using JavaScript
  • Handle mouse clicks using JavaScript
  • Change the displayed web page using JavaScript
  • Change the content of an image element using JavaScript

Overview

The purpose of this assignment is to use JavaScript to handle mouse-overs and mouse-clicks, and to change the web page being displayed.

Example

Rollovers assignment image
Example of Rollovers assignment

Program Specifications

  • This assignment should include separate CSS and JavaScript files.
  • Make sure the HTML, CSS, and JavaScript files all have documentation comments.
  • Create a web page with a heading, four to six thumbnail images centered across the top of the page, and a centered image below that. The centered image on the bottom should start with the full-size version of the first thumbnail image.
  • Use JavaScript to set up mouse-over and mouse-click handlers for each of the thumbnail images. When a thumbnail image is moused-over, the image in the bottom, centered image should be changed to be the full-size version of the thumbnail image. When a thumbnail image is clicked on, the whole web page should be replaced with the full-sized version of the thumbnail image.
  • The bottom, centered image should change size to match the size of the image being displayed.

Grading rubric

  • 5 pts: There are separate HTML, CSS, and JavaScript files that work together properly.
  • 5 pts: All of the files have complete documentation comments and follow common coding conventions.
  • 5 pts: The HTML file doesn't contain any styling or JavaScript.
  • 5 pts: CSS is properly used to style the page to look similar to the example given.
  • 5 pts: The JavaScript code implements the requirements of the assignment without errors.
  • 10 pts: Placing the mouse cursor over a thumbnail displays the full-size image in the bottom, centered image element.
  • 5 pts: The web page content is changed to the full-size image when a thumbnail is clicked on.