Cat Chases Your Mouse

Developer.com content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.

Mr. Scripts…

You have to be running Netscape Navigator 4.0 or higher to see it, but if you are, it’s a cute effect. If you have a page designed for children, this will be a hit.

The effect is quick, simple and will get a smile. It’s an animated cat that chases your mouse around the browser screen. Take a look.

This script was submitted to our old JavaGoodies site by Greg Bland, AKA “DaBoMB”.

I altered it slightly. Greg has some text following the mouse around. I went out onto the Web and found a little animated kitty. Do you know how hard it was to find an animated kitty that is looking left? There are thousands of animated cats, but they all look right. Ugh!

But I found this one and the rest is a Script Tip. Let’s start with the layer:

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

It’s a basic layer format. The layer is given the name “mymouse”. The page background is white and the animation has a transparent background, so I set the layer background to white so that the mouse would appear to be floating on the page.

The TOP and LEFT attributes state where the kitten image will appear when the page first loads. You may have noticed it had to quickly jump to your cursor once you moved it. The z-index is not really needed because this is the only image on the page. If there were multiple images in layers, this z-index would state which was foremost in the pile. Zero is the default, so, again, this isn’t needed, but by leaving it in, I got to tell you about the z-index. That’s a good enough reason to keep it.

You can see the basic HTML IMG tag that produces the image. Remember that it’s not the image being moved around but rather the layer that contains the image.

The layer wraps up with the end tag. Now the script:

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

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

Since the script is short, let me quickly hit some of the commands. You’ll basically be able to break it down from there with a little help.

• ev is shorthand for event.
• pageX is an offset from the top of the browser screen in regards to the layer itself.
• pageY is the same, but from the left.
• captureEvents instructs the browser to capture something before returning to the item with focus, in this case, the layer.
• Event.MOUSEMOVE is spelled and capitalized correctly. It deals with the browser event of moving the mouse from place to place.
• onMouseMove is an Event Handler that is triggered when the mouse moves.

We’re good to go now. The function trackit() rolls and grabs the top and left offset of the layer. Now the script knows where the layer is located. Notice the layer[0]. That connects those two hierarchy statements to that on layer one the page.

Those top and left values are assigned to ev.pageX and ev.pageY. That places the layer at those two points on the page. The layer is placed using the upper left hand corner as the point created by X and Y.

The script now looks for an event to capture, namely the movement of the mouse. When it happens, that movement is captured in terms of position.

The script triggers the onMouseMove and the function runs again grabbing the two offset numbers and repositioning the layer.

It happens again and again. The effect of the kitten following the mouse is achieved by the the layer being redrawn and redrawn again and again.

See, quick, and clean, and we wrapped it up in one Script Tip.

We start on a hard one again next week. This time, it’s an IE only script that pops up a full table when a mouse passes over it. It’s a great effect to have on an HTML resume.

Next Time: Pop-Up tables