Thursday, March 28, 2024

So, You Want A Mouse Trail, Huh?

Use these to jump around or read it all…


[IE First]
[Navigator Next]
[Fancy Trailing Stuff]

Once something new comes out, I get letters like crazy asking how to get the effect. This is just such an effect.
It’s been out for a while so it’s not really new, but I’ve held off as long as I could. This is a mouse trail.

You’ve probably seen the effect. You log into a page and letters or images follow your pointer all over the page. Some love the effect and others hate it. I don’t mind it so much as long as the pointer element adds to the page and doesn’t overtake the content. When I have to constantly move the mouse to see the text, that’s a problem. Basically, if it’s done correctly and in a fairly subtle fashion, it may add to the page.

There are numerous methods of getting the effect. The problem comes in when you attempt to get the effect across browsers. Internet Explorer follows the mouse one way and Netscape Navigator follows the mouse another.



IE First

The effect is achieved on Internet Explorer by creating a script that sees the location of the mouse as an X and Y point on the screen. A name is given to an image and that image is told to basically put itself where the X and Y intersect. The script runs every time the mouse moves and the effect is an image following the pointer. Of course you can get the same effect with text if you set the text to a division and give the division the name.

Here’s a short script by Chase Cathcart that gets the job done. Remember that you must be viewing in Internet Explorer to see the kitty.

The script then looks like this:


<style>
#pic1{position:absolute; }
</style>

<script>
//Copyright 2001 Chase Cathcart. Please leave this in here.
function trackit(){
document.all.pic1.style.left = event.x
document.all.pic1.style.top = event.y
if(event.x < “200”){
document.all.pic1.style.left = “200”
}
}
document.onmousemove = trackit
</script>

<img src=”kittenrunning.gif” id=”pic1″>

See the X and the Y setting denoting position on the entire browser screen (document.all)? That’s the basic format.

You can get the same effect on Netscape Navigator with just a couple of changes.



Navigator next

The effect is the same except the player change a little bit. Here the author, Grab Bland, has set up a Layer and then attached it to the same X and Y location format. Take a look. Remember that you’ll need to have Netscape Navigator to get the effect.

Here’s the code:


<SCRIPT LANGUAGE=”javascript”>

//(C) copyright 1998 greg bland all rights reserved

function trackit(ev) {
document.layers[0].pageX = ev.pageX
document.layers[0].pageY = ev.pageY
}

document.captureEvents(Event.MOUSEMOVE)
document.onMouseMove = trackit

</script>

<LAYER NAME=”mymouse” BGCOLOR=”white” TOP=100 left=”100″ z-index=0>
<IMG SRC=”kittenrunning.gif”>
</LAYER>

This script has been a Script Tip for a long while now. Pop over here for a much more in depth
discussion regarding how the script functions.



Fancy Trailing Stuff

This is the big trick, getting the effect across browsers. Yes, you can simply create a large script from the two smaller ones above set up as a simple if/else format. If the browser is IE, write this script to the page. If it is
Netscape Navigator, write the other to the page.


However, the trick that really moves people is not only to get the mouse to be followed, it’s to get the stuff that’s following the mouse to do the tricks.

The vast majority of the mouse trail tricks I see come from a site called Dynamic Drive. You can link to their mouse trail page here. There are other places and a quick search of Yahoo will pop them all up. Click here to do the search.

The trail effect on this page is by Philip Winston and can be found here.

It’s a simple copy, paste and download of a single image. The code is basically just what I showed you above except there are both divisions and elements that work on both browsers. in fact, except for the fancy coding that creates a sort of “gravity”, the codes are a lot like what I showed you up above.


That’s That

There’s not a whole lot more to tell. Now you understand the basic reason why the mouse trail works and how to get one on your own page. That’s the easy part.

The hard part is deciding if the mouse trail is really and effect that adds to, or harms, your page.


Enjoy!


[IE First]
[Navigator Next]
[Fancy Trailing Stuff]

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured