Essentially, the script works by capturing a links current position and then animating an element towards that link. When you have a few links in the page, the overall effect is one of a gliding or fluid motion rollover.

The first thing we need to do is create a series of variables to use later on in scripts. It is important to note that an alternate approach could be employed here, where the variables become arguments of the function and are set at the event handler point. This would allow the user to set different speeds or different offsets at each link. However, in most instances setting global variables as I have done below would suffice.

1. var timer1=null;

2. px = (document.getElementById) ? "px" : "";

3. var offset = 15;

4. var timerspeed = 25;

5. var decrease = 0.09;

Line 1:Creates a variable called timer1. This variable is used to help control the animation timer used in this script. It is good practice to create a global variable to control animation processes because not only does this give you better control over terminating the animation process, but in scripts that are more complex, it helps you better track what is going on in your own scripts.

Line 2:The px variable is used to assign whether pixels are added or not. If the condition document.getElementById is met, then pixels as measurement units are added. We need to do this because if we use a XHTML DTD then the browser expects a measurement unit to be supplied. If the browser is not a standards based browser or in other words doesn't meet the document.getElementById condition, then no pixels are applied. This allows older browsers such as Netscape 4 to function properly.

Line 3:The offset variable is used to give more finite control over where the animation ends. By default an animation will always end at the top left corner position of a link element and sometimes this position may not suit. For example, we may want to have the animation end at the centre of the link element. By increasing or decreasing the offset variable, we can adjust the end position of the animation to suit.

Line 4:This variable allows us to set the timer speed of the animation. Lower numbers will result in quicker animations, higher numbers in slower animations.

Line 5:The decrease variable is used to control the deceleration of the glide effect. In most instances setting it .09 should result in a smooth animation and nice deceleration effect. But you can try setting this variable to different numbers to see what kind of results you obtain.