Class 5 - In Class Assignment

Your assignment, should you choose to accept it, is to convert this wireframe of an e-commerce store into an actual web page, using XHTML, CSS, and Javascript.

When a user mouses over any of the product thumbnails, more information about that product "pops up" over the thumbnail. When a user mouses off of the thumbnail, the product info disappears again.





Suggestions for how to structure your javascript for this assignment:

1) create an event observer that detects the "load" of the window
2) that observer calls a function called setThumbBehaviors()
3) the function setThumbBehaviors should get a list of all the elements that are thumbnails (hopefully you've set up the thumbnails in your XHTML so that they all have the same class name)
4) loop through each thumbnail element (using the .each() function of prototype), and attach an event observer to each one that detects "mouseover" events
5) the "mouseover" event observer should call a function whenever a user mouses over a thumbnail
6) that function should calculate the exact position of the thumbnail that was moused over, and figure out which "product info" div is associated with that thumbnail (see the tabs example).
7) the function should then make the "product info" div visible, and position it at exactly the same spot as the thumbnail info

Some example files that will help:
How to get the position of any element on the page using prototype.js
An example of a tabbed layout using prototype.js