View Full Version : Image following the mouse

01-14-2004, 11:27 PM
how can i do that?

it has to has to has to work in Mozilla and IE

Roy Sinclair
01-14-2004, 11:35 PM

Sometime you just need to know the right keywords for a search :)

01-15-2004, 01:34 AM
Please i just need a simple image to follow my mouse... thats all, please help

Roy Sinclair
01-15-2004, 07:33 PM
Do you want the whole script already written or the principles of how it's accomplished?

The principles are simple and I can point you to som tooltip code that could be adapted to do this but I don't have any complete scripts laying about.

01-15-2004, 07:36 PM
just the basic steps would be fine thanks.

01-15-2004, 08:25 PM
The basic steps.
1)Put the image in an absolute positioned DIV

<div id="tracker" style="position:absolute"><img src="cursorbig.gif"/></div>

2)Track mouse move events
in IE

document.onmousemove = getXY_ie;
function getXY_ie()
X = event.x+d.body.scrollLeft;
y = event.y+d.body.scrollTop;

in NS

document.onmousemove = getXY_ns;
function getXY_ns(evnt)
X = evnt.pageX;
y = evnt.pageY;

3)Position the div

function move(x, y)
document.getElementById("tracker").style.left = x;
document.getElementById("tracker").style.top = y;

(Put the call to move() at the end of the getXY() function)

Then put browser checks for NS and IE.

Or you can just use this script (http://www.javascript-fx.com/scriptclips/cursortrack/index2.html)

01-15-2004, 08:29 PM
go to

and do a search lots of readymade scripts here.

Roy Sinclair
01-15-2004, 08:44 PM
For a globally available mouse following image you'd hook the document.onmousemove event and then have a handler which gets the mouse position from the event offsets it a bit so your image doesn't cover the mouse and then sets the x and y positions (or left and top positions) for the image to that offset.

This code may work (it's untested but should be easy enough to whip into shape):

function MouseMoveHandler(e) {
if (document.all) {
var Ix = event.clientX + document.body.scrollLeft;
var Iy = event.clientY + document.body.scrollTop;
var Ii = document.getElementById('imageId');
Ii.style.pixelLeft = parseInt(Ix,10) + 25;
Ii.style.pixelTop = parseInt(Iy,10)
} else {
Ii.style.left = Ix + 25;
Ii.style.top = Iy;
document.onmousemove = MouseMoveHandler;

01-15-2004, 11:02 PM
what is that parse intager

01-15-2004, 11:03 PM
function Position(e){
var IE = document.all?true:false
if (!IE){
document.getElementById('Trail').style.top = e.pageY
document.getElementById('Trail').style.left = e.pageX
if (IE) {
document.getElementById('Trail').style.top = event.clientY + document.body.scrollLeft
document.getElementById('Trail').style.left = event.clientX + document.body.scrollTop
thats what i came up with