This is done using the following Javascript. The two parts in red should be replaced by the number of times you want the image to repeat itself and by the image file you want to use.

The image you use should be fairly small this is to reduce the loading time. Also remember that the image should have a transparent background.

<SCRIPT LANGUAGE="JavaScript1.2">
var trailLength = 8;
var path = "beermug2.gif";

var isIE = false, isNav = false, range = "all.", style = ".style", i, d = 0;
var topPix = ".pixelTop", leftPix = ".pixelLeft", images, storage;
if (document.layers) {
isNav = true, range = "layers.", style = "", topPix = ".top", leftPix = ".left";
} else if (document.all) {
isIE = true;
}
function initTrail() {
images = new Array();
for (i = 0; i < parseInt(trailLength); i++) {
images[i] = new Image();
images[i].src = path;
}
storage = new Array();
for (i = 0; i < images.length*3; i++) {
storage[i] = 0;
}
for (i = 0; i < images.length; i++) {
(isIE) ? document.write('<div id="obj' + i + '" style="position: absolute; z-Index: 100; height: 0; width: 0"><img src="' + images[i].src + '"></div>') : document.write('<layer name="obj' + i + '" width="0" height="0" z-index="100"><img src="' + images[i].src + '"></layer>');
}
trail();
}
function trail() {
for (i = 0; i < images.length; i++) {
eval("document." + range + "obj" + i + style + topPix + "=" + storage[d]);
eval("document." + range + "obj" + i + style + leftPix + "=" + storage[d+1]);
d = d+2;
}
for (i = storage.length; i >= 2; i--) {;
storage[i] = storage[i-2];
}
d = 0;
clearTimeout(timer);
var timer = setTimeout("trail()", 10);
}
function processEvent(e) {
if (isIE) {
storage[0] = window.event.y+document.body.scrollTop+10;
storage[1] = window.event.x+document.body.scrollLeft+10;
} else {
storage[0] = e.pageY+12;
storage[1] = e.pageX+12;
}
}
if (isNav) {
document.captureEvents(Event.MOUSEMOVE);
}
if (isIE || isNav) {
initTrail();
document.onmousemove = processEvent;
}
// End -->
</script>

Another interesting cursor effect (JavaScript)

Click here or on the image to see an example of what I mean by this.

In order for this to work you will need two images uploaded to your webspace, these are pupil.gif and whites.gif. You can download these files in eyes.zip here.

<script language="JavaScript">
var brOK=false, mie=false;
if(document.layers || document.all) brOK=true;
if(document.all) mie=true;
var ex=0, ey=0;
var ae, le, re, x0, y0, tid, realx, realy;

function navMove(e) {
ex=e.pageX;
ey=e.pageY;
moveeye()
return routeEvent(e);
}

function mieMove() {
ex=document.body.scrollLeft+event.x;
ey=document.body.scrollTop+event.y;
moveeye();
}

function moveeye() {
dy=ey-y0-20;
dx1=ex-x0-20;
dx2=ex-x0-60;
r=Math.sqrt(dx1*dx1+dy*dy);
if(r<20) r=20
dx1=dx1*10/r+x0+10;
dy1=dy*10/r+y0+10;

r=Math.sqrt(dx2*dx2+dy*dy);
if(r<20) r=20
dx2=dx2*10/r+x0+50;

ae.left=x0;
ae.top=y0;
le.left=dx1;
le.top=dy1;
re.left=dx2;
re.top=dy1;
}

function setHandlers() {
if(!mie){
y0=document.eyeballs.top;
x0=document.eyeballs.left;
ae=document.eyeballs;
le=document.lefteye;
re=document.righteye;
window.captureEvents(Event.MOUSEMOVE);
window.onMouseMove=navMove;
} else {
y0=document.all.eyeballs.style.pixelTop;
x0=document.all.eyeballs.style.pixelLeft;
ae=document.all.eyeballs.style;
le=document.all.lefteye.style;
re=document.all.righteye.style;
window.document.onmousemove=mieMove;
}
realx=x0+0.1;
realy=y0+0.1;
moveall();
}

function moveall() {
rx=realx+40
ry=realy+40;
rx+=(ex-rx)*0.1;
ry+=(ey-ry)*0.1;
realx=rx-40;
realy=ry-40;
x0=Math.round(realx);
y0=Math.round(realy);
moveeye();
tid=setTimeout('moveall()',100);
}

function placeeyes(x,y) {

if(brOK) {

ex=x+40;

ey=y+40;

s ='<DIV ID="dummy" STYLE="position:absolute; top:'+y+'; left:'+x+'; width:10; height:10;"> </DIV>';

s+='<DIV ID="eyeballs" STYLE="position:absolute; top:'+y+'; left:'+x+'; width:80; height:40;" ><IMG SRC="whites.gif" border=0></DIV>';

s+='<DIV ID="lefteye" STYLE="position:absolute; top:'+(y+10)+'; left:'+(x+10)+'; width:20; height:20;" ><IMG SRC="pupil.gif" border=0></DIV>';

s+='<DIV ID="righteye" STYLE="position:absolute; top:'+(y+10)+'; left:'+(x+50)+'; width:20; height:20;" ><IMG SRC="pupil.gif" border=0></DIV>';

document.writeln(s);

}

}

function clearEyes() {
if(tid) clearTimeout(tid);
}

placeeyes(200,100);
window.onload=setHandlers;
window.onunload=clearEyes;
</script>

Shake Me!

This is a silly bit of code. No wait - this is a bit of code to do something silly. Click on the button below to see what I mean.

In the head section of your page put this ...

<SCRIPT LANGUAGE="JavaScript">
<!--
function shakeme(n) {
if (self.moveBy) {
for (i = 10; i > 0; i--) {
for (j = n; j > 0; j--) {
self.moveBy(0,i);
self.moveBy(i,0);
self.moveBy(0,-i);
self.moveBy(-i,0);
}
}
}
}
// -->
</script>

Where you want the button to appear on your page put this ...

<form>
<input type=button onClick="shakeme(2)" value="Shake me!">
</form>