Task: Create an image shuffling animation using JavaScript and Netscape layers.

Elements:

1. A series of GIFs or JPGs all having the same height and width. You may use the prepared set available in http://raven.ubalt.edu/students/ipnm/assn4/KIT/images.

2. A Web page called yourLastName.html with at least three layers. The KIT directory for this assignment contains a page called template.html where all necessary layers are defined and named. You may adapt this page for your project.

3. A script that preloads all images available to the animation.

4. A link that triggers the animation (cued on the word Action in the diagram above).

Behavior:

1. When the user clicks the Action link, JavaScript selects an image filename randomly from the pool and assigns that image file, using src replacement as in rollovers, to the image in the layer lowLayer (showing the "Red Rock" graphic above). Initially this layer is covered entirely by a second layer hiLayer (showing the diamonds-and-circles pattern above).

2. The layer hiLayer moves to the left, revealing lowLayer .

3. Once hiLayer has moved completely clear of lowLayer, hiLayer is moved below lowLayer.

4. Now hiLayer moves to the right until it is completely covered by lowLayer.

5. The source of the image in hiLayer is set identical the the source of the image in lowLayer.

6. At this point hiLayer is moved above lowLayer once again.

Submission Instructions:

Submit your page by FTP to http://raven.ubalt.edu/students/ipnm/assn4 by 8:00 p.m. Tuesday, March 10.