Working on eCommerce Site

I'm working on the current assignment: an eCommerce site where you mouseover images, revealing their product information in place of the product; when you roll off, the image returns to normal.

Right now, I have the page set up so that when you roll over an image, the div with product information appears...just not over the original image; instead, it appears in the div below and only disappears when I roll over the product info again. I need to come up with something in my code that positions the new div in the right place.

What this involves script-wise is adding a class name to the image div when rolled over, then remove the div name when rolled off. Easier said than done!

Another problem I have is with the CSS buttons - I can't get the link to apply to the entire button (button meaning inline un-ordered list), only to the linked text in the button. I tried putting the link around the <li> instead, but it made no difference.

A good starting place for me was Amos' list of steps:

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

I did a lot of copying and pasting from class examples - I'm hoping to go back and understand everything later.