Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About BTH User Agreement Privacy Site Map Contact News Feeds

Easy Java Script Code to Add Mouse Trails to Your Webpage

By Stephen Bucaro

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.

<img id="img0" style="position:absolute; left:0; top:1000; visibility:hidden;" src="flake.gif" />
<img id="img1" style="position:absolute; left:0; top:1000; visibility:hidden;" src="flake.gif" />
<img id="img2" style="position:absolute; left:0; top:1000; visibility:hidden;" src="flake.gif" />
<img id="img3" style="position:absolute; left:0; top:1000; visibility:hidden;" src="flake.gif" />
<img id="img4" style="position:absolute; left:0; top:1000; visibility:hidden;" src="flake.gif" />
<img id="img5" style="position:absolute; left:0; top:1000; visibility:hidden;" src="flake.gif" />

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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv=Content-Type content="text/html; charset=windows-1252">

<script type="text/javascript">

var xPos = new Array(0,0,0,0,0,0);
var yPos = new Array(0,0,0,0,0,0);
var oldX = 0;
var oldY = 0;
var timeout = 0;
var count = 0;

function mouseTrail(e)
{
  count++;
  if(count < 4) { return; }
  count = 0;

  if(window.event)
  {
    e = window.event;
  }

  for(var i = 5; i >= 0; i--)
  {
     xPos[i + 1] = xPos[i];
     yPos[i + 1] = yPos[i];
  }

  xPos[0] = e.clientX + document.body.scrollLeft;
  yPos[0] = e.clientY + document.body.scrollTop;
}

function drawTrail()
{
  var id;

  for(var i = 0; i < 6; i++)
  {
     id = "img" + i;

     if((xPos[0] == oldX) && (yPos[0] == oldY))
     {
        timeout++;
     }
     else
     {
        timeout = 0;
     }

     if(timeout > 20)
     {
       document.getElementById(id).style.visibility = "hidden";
       document.getElementById(id).style.left = 0;
       document.getElementById(id).style.top = 2000;
     }
     else
     {
       if((xPos[i] > 0) && (yPos[i] > 0))
       {
          document.getElementById(id).style.left = xPos[i];
          document.getElementById(id).style.top = yPos[i];
          document.getElementById(id).style.visibility = "visible";
       }
    }
    oldX = xPos[0];
    oldY = yPos[0];
  }
}

document.onmousemove = mouseTrail;

var timer = setInterval("drawTrail()", 20);

</script>

</head>
<body>

</body>
</html>

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.