Free e-cards, birthday e-cards, fantasy art and artists community

Trailing Mouse Cursor

"I love Wicked Moon's site and when agitated by the vississitudes of life sit in the dark and watch the flowered cursor soothe my savage soul. Robyn"

It doesn't have that effect on everyone, but love it or hate it, it's the question we get asked most: How do you set up that trailing mouse cursor? The mouse cursor is otherwise known as, "the butterflies", or "those things that follow your mouse around".

Note: You can't use these as your Windows backdrop, they're for websites only. Script works with version 4 browsers and above.

Installation instructions:

Step 1: To use the graphics I designed, download each of the following 6 images. Save them into the same folder as your HTML pages. If you've set up a script before and want to use your own images, look for where it says img src in the script and make changes there.

Step 2: Copy the HTML code from the box below and paste into the <BODY> section of your webpage. (You may want to paste it towards the bottom of the page. If it's at the top search engines may run into it as they spider the first few sentences of your page).

<div id="dot0" style="position: absolute; visibility: hidden; height: 19; width: 18;"> 
    <img src="trail6.gif" height=19 width=18> </div>
  <div id="dot1" style="position: absolute; height:19 ; width: 18;"> <img src="trail6.gif" height=19 width=18> 
  </div>
  <div id="dot2" style="position: absolute; height: 19; width: 22;"> <img src="trail5.gif" height=19 width=22> 
  </div>
  <div id="dot3" style="position: absolute; height: 22; width: 24;"> <img src="trail4.gif" height=22 width=24> 
  </div>

<div id="dot4" style="position: absolute; height: 26; width: 26;"> <img src="trail3.gif" height=26 width=26> 
  </div>
  <div id="dot5" style="position: absolute; height: 34; width: 37;"> <img src="trail2.gif" height=34 width=37> 
  </div>
  <div id="dot6" style="position: absolute; height: 48; width: 51;"> <img src="trail1.gif" height=48 width=51> 
  </div>
  <script LANGUAGE="JavaScript">
<!-- hide code
var nDots = 7;

var Xpos = 0;
var Ypos = 0;

// fixed time step, no relation to real time
var DELTAT = .01;
  // size of one spring in pixels
var SEGLEN = 10;
  // spring constant, stiffness of springs
var SPRINGK = 10;
  // all the physics is bogus, just picked stuff to
  // make it look okay
var MASS = 1;
// Positive XGRAVITY pulls right, negative pulls left
// Positive YGRAVITY pulls down, negative up
var XGRAVITY = 0;
var YGRAVITY = 50;
// RESISTANCE determines a slowing force proportional to velocity
var RESISTANCE = 10;
  // stopping criteria to prevent endless jittering
  // doesn't work when sitting on bottom since floor
  // doesn't push back so acceleration always as big
  // as gravity
var STOPVEL = 0.1;
var STOPACC = 0.1;
var DOTSIZE = 11;
  // BOUNCE is percent of velocity retained when 
  // bouncing off a wall
var BOUNCE = 0.75;

var isNetscape = navigator.appName=="Netscape";

// always on for now, could be played with to
  // let dots fall to botton, get thrown, etc.
var followmouse = true;

var dots = new Array();
init();

function startanimate() {	
    setInterval("animate()", 20);
}

// This is to line up the bullets with actual LI tags on the page
// Had to add -DOTSIZE to X and 2*DOTSIZE to Y for IE 5, not sure why
// Still doesn't work great
function setInitPositions(dots)
{
    // initialize dot positions to be on top 
    // of the bullets in the <ul>
    var startloc = document.all.tags("LI");
    var i = 0;
    for (i = 0; i < startloc.length && i < (nDots - 1); i++) {
        dots[i+1].X = startloc[i].offsetLeft
            startloc[i].offsetParent.offsetLeft - DOTSIZE;
        dots[i+1].Y = startloc[i].offsetTop +
            startloc[i].offsetParent.offsetTop + 2*DOTSIZE;
    }
    // put 0th dot above 1st (it is hidden)
    dots[0].X = dots[1].X;
    dots[0].Y = dots[1].Y - SEGLEN;
}

// just save mouse position for animate() to use
function MoveHandler(e)
{
    Xpos = e.pageX;
    Ypos = e.pageY;	  
    return true;
}

// just save mouse position for animate() to use
function MoveHandlerIE() {
    Xpos = window.event.x + document.body.scrollLeft;
    Ypos = window.event.y + document.body.scrollTop;	  
}

if (isNetscape) {
    document.captureEvents(Event.MOUSEMOVE);
    document.onMouseMove = MoveHandler;
} else {
    document.onmousemove = MoveHandlerIE;
}

function vec(X, Y)
{
    this.X = X;
    this.Y = Y;
}

// adds force in X and Y to spring for dot[i] on dot[j]
function springForce(i, j, spring)
{
    var dx = (dots[i].X - dots[j].X);
    var dy = (dots[i].Y - dots[j].Y);
    var len = Math.sqrt(dx*dx + dy*dy);
    if (len > SEGLEN) {
        var springF = SPRINGK * (len - SEGLEN);
        spring.X += (dx / len) * springF;
        spring.Y += (dy / len) * springF;
    }
}

Step 3: Preview in your browser and hopefully you will see the images following your cursor around.

Flower graphics © Jason Brown / Website

Trailing mouse cursor script © Philip Winston / Website

Other cool webpage effects

Status bar on Mouse Over (All browsers)

Don't click, but hover your mouse over this link (if you do click mind, you'll find some fantastic magazine art). Notice the message that appears in the status bar below: "Click here for something amazing!"

Usually the URL of the link would appear. But you can change that to describe what's at the other end of the link, or to just disguise the link.

This is a simple technique to add to your pages. Edit the <A HREF> tag of your links so they include the following javascript code.

<A HREF="mag.html" OnMouseOut="window.status=' '; return true" OnMouseOver="window.status='Click here for something amazing!' ; return true">click here</A>

The red text is the message you should change. We use this javascript for all our thumbnail links.

Status bar message (All browsers)

We describe above how to include a message on a mouse rollover. However, you'll notice on this page a message in the status bar no matter where you position your cursor. In this case it reads, "Wicked Moon Cards @ wickedmoon.net". You can put any message here, such as "CTRL-D to bookmark".

Again, it's really easy to set up. Modify your <BODY> tag to include the following code:

Modify the red text to suit your site.

Active Link change on Mouse Over (Internet Explorer only)

If you're using Explorer (which most people are), you will notice the colour of our hyperlinks change as you move over them. This is a nice little effect to bring a bit of life to your pages. Non-Explorer users see nothing and there are no compatibility problems.

Paste the following code between your <HEAD> tags. The value highlighted in red defines the colour.

Home About Credits Testimonials Link to us Privacy policy Links Contact

Hosting managed by Rydia.net