Having set all our global variables we need a way to capture an elements current position. The getPosition() function does just that;

6. function getPosition(id) {
7. if (document.getElementById) {
8. endPos = document.getElementById(id).offsetLeft;
9. }
10. else if (document.layers) {
11. endPos = document.layers[id].left;
12.}
13.}

Line 6:Creates a function called getPosition() and utilises an id argument as a parameter that will be passed to this function at the event handler point.

Line 7:Specifies a condition. If the browser meets the document.getElementById condition, then the browser will run the next line. If it does not, then it will move to the next condition specified in the function.

Line 8:We create a variable called endPos (signifies end position of animation) and point it to document.getElementById(id).offsetLeft; statement. The offsetLeft method is a way of determining the current elements position from left of screen. If we wanted to capture the elements position from top of screen then we would use offsetTop. This method works on IE5+, Safari, Mozilla based browsers and Opera 7+.

Line 9:Closing bracket for condition.

Line 10:Specifies our second condition. Because Netscape 4 uses a completely different method of capturing an elements current position, we need to specify a condition for that browser by using the document.layers object.

Line 11:If the browser is Netscape 4, then the endPos variable will call the document.layers[id].left; statement.

Line 12 & 13:Closing brackets for the function.

Just to be clear on what we are doing in the above function. Conceptually, that element who's current position we are capturing is an active element. This allows us to define an end point for the animation, in other words where the animation will end up on a mouseover event. Now that we have captured an elements end position, we can move on to the main animation function.