Ben Nadel © 2008.
All content is the property of Ben Nadel and Kinky Solutions.
box_graphics.htm ( 9,895 Bytes )
This page demonstrates the use of Javascript class wrappers that are used to create controllers for DOM nodes. In this case, the image is loaded in to an internal image object. Once the image has completed, pieces are (divs with images) are dynamically created, wrapped in a PieceClass instance and added to the document.
Each wrapper class controls the movement and mouse events for its target piece. The movement is Timeout-based, so realize that the move pieces you have the more of a drain it will put on your browser (older browsers beware).
NOTE: In the code you are going to see the use of the varible objSelfand in var objSelf = this;. This is used when setting methods with a delayed invoking (as in setting mouseover events or timeout events). This is required because putting in this directly into a delayed method will use this in reference to the calling scope (upon invokation) and not the this in the setting method. objSelf creates a local variable that then creates a proper reference for the delayed invokation.
Added April 21, 2006 / Updated April 21, 2006