Art 511 Telecommunications

Mini-Assignment J

Quick study using Javascript based rollovers



This assignment asks you to do a quick study using Javascript to control rollovers.

Here are the steps:

1. Create an html page with a table of at least 6 cells
2  Pick 2 sets of 2/2 images that you will use in the table - Aon and Aoff // Bon and Boff
 (2 of the images will show when no one is rolling over your links. 
The other images will replace the base images when someone rolls over each of your links.)
3. Pick images that bear some interesting conceptual relationship to each other and to their replacements.
4. Design a pattern to use the images in the grid. 
(see the example that shows some sample patterns - these are only illustrations  yours could look however you like)
5. Resize the images in html or photoshop so they are roughly comparable.

6 place two links below the table.  One link should control all the images in pattern A and the other should control all the images in pattern B.  When someone rolls over link A then all the Aoff images should change to the Aon image; when they roll out, all images should change back to Aoff.  Same for the Boff and Bon images

7. Use the script in Javascript book web site as a template to modify. The secret will come in naming all the images in each pattern with the same name.
*Book script examples from Javascript for the World Wide Web 5th edition (Negrino & Smith)\
* example of triggering rollovers from a link rollover
(note consult your javascript book chapter on images for explanations of what is going on if you are not sure.  Since your book is the next edition from the scripts we are using, its scripts may be slightly different.)


rolloverpattern


illustration of some sample patterns - you can set up any pattern you want