**Basically what happens is this:
**-  The triggers are absolutely positioned over the image so you can easily place them anywhere you want.

•  Once the mouse moves over a trigger object, the pop-up element is made visible.
•  The pop-up is positioned relative to the trigger so you can easily make it look pretty.

 

**Some side notes:
**-  Absolutely positioned elements position themselves relative to the top-left corner of the 1st parent element that is relatively positioned. Thats why there is a pop-up container of the same size of the trigger around the actual pop-up.

•  Absolutely positioned elements position break the flow of your document. Parent elements dont size to accomodate their absolutely positioned child elements. The child elements overflow their parent instead.
•  u can use the node-1 and node-2 classes to position each trigger individually
•  u can add as many triggers as you want, but try to make them far apart that you dont accidentally float off of one. 

 

**Other ideas:
**You could also use javascript mouse-over events to activate pop-up visibility instead of pure css hovers. This would also allow you some more fancy things like keeping the pop-up visible for a while longer after the mouse leaves the trigger, or keeping the pop-up visible while the mouse is positioned over the pop-up. Or maybe even use an event on an entirely other object  to make a pop-up go away.

(_/)
(='.'=)
(")(")This is Bunny. Copy and paste bunny into your signature to help him gain world domination.