...

View Full Version : Image following the mouse



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

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

Roy Sinclair
01-14-2004, 10:35 PM
http://www.google.com/search?hl=en&ie=UTF-8&oe=UTF-8&q=javascript+mouse+trailer

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

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

Roy Sinclair
01-15-2004, 06: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.

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

RoyW
01-15-2004, 07: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.captureEvents(Event.MOUSEMOVE);
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)

narf
01-15-2004, 07:29 PM
go to
www.webmonkey.com

and do a search lots of readymade scripts here.

Roy Sinclair
01-15-2004, 07: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;

JAVAEOC
01-15-2004, 10:02 PM
what is that parse intager
?

JAVAEOC
01-15-2004, 10: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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum