Easy Java Script Code to Add Mouse Trails to Your Webpage

Microsoft Windows has a feature called "mouse trails" that, when activated, causes
the mouse pointer to be followed by a trail of mouse pointers when the user moves
it. This makes it easier for the user to locate the mouse pointer on the screen.
However, very few users have the mouse trails feature activated on their PC. Wouldn't
it be cool if your webpage created it's own mouse trails? In this article, I give
you Java Script code that will cause mouse trails when your visitor moves their
mouse pointer on your webpage.

The first thing you need to do is choose a mouse trail image. Windows mouse trail
images are copies of the mouse pointer, but for your webpage you can use any image.
Because the image needs to be displayed quickly, and it needs a transparent
background, a small .gif image is the best choice. For this example, I'll use a
32 x 32 pixel image of a snow flake. Feel free to copy this image for your own use.

The mouse trail will consist of five copies of this image. You need to hide the
mouse trail images at the bottom of your webpage. Shown below is the code for the
five copies of the image. Make sure this is the last html code on your webpage.

Note the style attribute applied to each image. The position:absolute
rule means the images don't have to line themselves up in the flow when the webpage
is rendered. Absolute position puts them in their own separate "layer". And because
you placed the code for these elements last on the page, they will be displayed on
the top layer. However, at this point the visibility:hidden rule makes them invisible.

Now lets look at the Java Script code. Of course you may just copy and paste the
code into the <head> section of your webpage. But for those who want an explanation,
I'll describe the code from the top down. The entire Java Script code for the mouse
trails example is shown below.

At the top of the Java Script code block we declare a group of global variables.
We declare two arrays. Each array has six elements. Each array element will contain
a coordinate for a mouse trail image, each xPos array element being paired with a
yPos array element to form a coordinate pair.

Below the declaration of global variables we define the mouseTrail function.
We'll call the mouseTrail function on each onmousemove event, passing it
the event, which along with other information contains the mouse pointer's position.

Because onmousemove events come fast and furious when the user is moving
the mouse, we don't want to respond to every event. The first code in the mouseTrail
function uses a variable named "count" to reduce that response to every fourth event.

On every fourth onmousemove event, the mouseTrail function shuffles each element
in each array one position to the left, then it gets the current mouse pointer
position from the event and places it in the first element of the arrays.

Below the definition of the mouseTrail function, we define the drawTrail
function. The for loop in the drawTrail function first compares the new
position of the mouse pointer, placed in the first element of the xPos and yPos
arrays by the mouseTrail function, with the positions it found there last time
it was called. If it has changed, it sets the timeout variable to 0. If it
hasn't changed, it increments the timeout variable.