CIS 119 - Rollover/Iframe

The objectives of this assignment are:

1. handle mouse rollovers using JavaScript
2. handle mouse clicks using JavaScript
3. change the displayed web page using JavaScript
4. 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, to change the web page being displayed.

Program Specifications

1. This assignment should include separate CSS and JavaScript files.
2. Make sure the HTML, CSS, and JavaScript files all have documentation comments.
3. 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.
4. 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.
5. The bottom, centered image should change size to match the size of the image being displayed.

Grading rubric

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