event not working with firefox and NS7

[Oscar Monteiro]

the Code below captures the Mouse move event, while event isn´t defined anywhere it still works in IE only, how can I define the event handler so it can work with other browsers, Firefox mostly.
-------snipped code-------------
Ymouse = -50;
Xmouse = -50;

function Mouse(evnt) {
Ymouse=event.y-20;
Xmouse=event.x;
}

the hole code:
<SCRIPT type="text/javascript">

Image0 = new Image;
Image0.src = "sailormoon.jpg";
Amount = 20;
Ymouse = -50;
Xmouse = -50;
Ypos = new Array;
Xpos = new Array;
Speed = new Array;
rate = new Array;
grow = new Array;
Step = new Array;
Cstep = new Array;
nsSize = new Array;

function Mouse(evnt) {
Ymouse=event.y-20;
Xmouse=event.x;
}
document.onmousemove=Mouse;
for (i = 0; i < Amount; i++) {
Ypos = Ymouse;
Xpos = Xmouse;
Speed = Math.random*4+1;
Cstep = 0;
Step = Math.random*0.1+0.05;
grow = 8;
nsSize = Math.random*15+5;
rate = Math.random*0.5+0.1;
}

document.write('<div style="position:absolute;top:0px;left:0px"><div style="position:relative">'); for (i = 0; i < Amount; i++) { document.write('<img id="si'+i+'" src="'+Image0.src+'" style="position:absolute;top:0px;left:0px;filter:alpha(opacity=90)">'); } document.write('</div></div>');

function MouseBubbles {
var hscrll=document.body.scrollTop;
var wscrll=document.body.scrollLeft;
for (i = 0; i < Amount; i++){
sy = Speed * Math.sin(270 * Math.PI / 180);
sx = Speed * Math.cos(Cstep * 4);
Ypos += sy;
Xpos += sx;
if (Ypos < -40) {
Ypos = Ymouse;
Xpos = Xmouse;
Speed = Math.random * 6 + 4;
grow = 8;
nsSize = Math.random * 15 + 5;
}

document.getElementById("si"+i).style.pixelLeft = Xpos + wscrll; document.getElementById("si"+i).style.pixelTop = Ypos + hscrll; document.getElementById("si"+i).style.width = grow; document.getElementById("si"+i).style.height = grow;

grow += rate;
Cstep += Step;
if (grow > 24) grow = 25;
}
setTimeout('MouseBubbles', 10);
}
MouseBubbles;

</script>

wish you all a nice weekend , and many thank for the help in the previous posts.

Best Regards

 

[Fred Oz]

the Code below captures the Mouse move event, while event isn´t defined anywhere it still works in IE only, how can I define the event handler so it can work with other browsers, Firefox mostly.
-------snipped code-------------
Ymouse = -50;
Xmouse = -50;

function Mouse(evnt) {

Add this line right after the function declaration:

var e = evnt || window.event;

then just use "e" rather than "event".

Ymouse=event.y-20;
Xmouse=event.x;

becomes:

Ymouse = e.y-20;
Xmouse = e.x;

You can also add support for older Netscape with:

Ymouse = e.y-20 || e.layerY-20;
Xmouse = e.x || e.layerX;

Untested, but see how you go.

 

[Oscar Monteiro]

Add this line right after the function declaration:

var e = evnt || window.event;

then just use "e" rather than "event".

becomes:

Ymouse = e.y-20;
Xmouse = e.x;

You can also add support for older Netscape with:

Ymouse = e.y-20 || e.layerY-20;
Xmouse = e.x || e.layerX;

Untested, but see how you go.

Thanks for helping me deffining the event handler Fred still lacks something to track mouse movement . Thanks anyway for the help given.

 

[Fred Oz]

Oscar Monteiro wrote:
[...]

Thanks for helping me deffining the event handler Fred still lacks something to track mouse movement . Thanks anyway for the help given.

There was more than one issue, modified code below (original commented out mostly)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>mouse move</title> </head> <body> <span id="theSpot"></span>

<SCRIPT type="text/javascript">
Image0 = new Image;
// Image0.src = "sailormoon.jpg";
Image0.src = "a.jpg";
Amount = 20;
Ymouse = -50;
Xmouse = -50;
Ypos = new Array;
Xpos = new Array;
Speed = new Array;
rate = new Array;
grow = new Array;
Step = new Array;
Cstep = new Array;
nsSize = new Array;

docBody = document.getElementsByTagName('body')[0];
// debug
// spot = document.getElementById('theSpot');

function Mouse(event) {
var e = event || window.event;
// Ymouse= e.y-20;
// Xmouse= e.x;
// clientX/Y works in IE too, is OR needed still?
Ymouse= e.clientY-20 || e.y-20;
Xmouse= e.clientX || e.x;
}

document.onmousemove = Mouse;
for (i = 0; i < Amount; i++) {
Ypos = Ymouse;
Xpos = Xmouse;
Speed = Math.random*4+1;
Cstep = 0;
Step = Math.random*0.1+0.05;
grow = 8;
nsSize = Math.random*15+5;
rate = Math.random*0.5+0.1;
}

var aDiv = document.createElement('div');
aDiv.style.position = 'absolute';
aDiv.style.top = '0';
aDiv.style.left = '0';

var bDiv = document.createElement('div');
bDiv.style.position = 'relative';
for (i = 0; i < Amount; i++) {
var oImg = document.createElement('img');
oImg.id = 'si' + i;
oImg.src = Image0.src;
oImg.style.position = 'absolute';
oImg.style.top = '0';
oImg.style.left = '0';
oImg.style.filter = 'alpha(opacity=90)';

bDiv.appendChild(oImg);
}

aDiv.appendChild(bDiv);
docBody.appendChild(aDiv);

/*
// replaced with DOM methods above
document.write('<div style="position:absolute;top:0px;' + 'left:0px"><div style="position:relative">'); for (i = 0; i < Amount; i++) { document.write('<img id="si'+i+'" src="'+Image0.src+'" ' + 'style="position:absolute;top:0px;left:0px;filter:' + 'alpha(opacity=90)">'); }

document.write('</div></div>');
*/

function MouseBubbles {
var hscrll=document.body.scrollTop;
var wscrll=document.body.scrollLeft;
for (i = 0; i < Amount; i++){
sy = Speed * Math.sin(270 * Math.PI / 180);
sx = Speed * Math.cos(Cstep * 4);
Ypos += sy;
Xpos += sx;

// debug
// if (i<5)
// spot.innerHTML = Ypos.join(' ') + '\n' + Xpos.join(' ');

if (Ypos < -40) {
Ypos = Ymouse;
Xpos = Xmouse;
Speed = Math.random * 6 + 4;
grow = 8;
nsSize = Math.random * 15 + 5;
}

// pixelLeft not supported by Firefox, just use left
// (works in IE too)
// document.getElementById("si"+i).style.pixelLeft = Xpos // + wscrll; // document.getElementById("si"+i).style.pixelTop = Ypos // + hscrll; document.getElementById("si"+i).style.left = Xpos + wscrll; document.getElementById("si"+i).style.top = Ypos + hscrll; document.getElementById("si"+i).style.width = grow; document.getElementById("si"+i).style.height = grow;

grow += rate;
Cstep += Step;

if (grow > 24) grow = 25;
}
setTimeout('MouseBubbles', 10);
}
MouseBubbles;
</script>
</body>
</html>

 

[Fred Oz]

Oscar Monteiro wrote:
[...]

Thanks for helping me deffining the event handler Fred still lacks something to track mouse movement . Thanks anyway for the help given.

There was more than one issue, modified code below (original commented out mostly)

[...]

Tested and working in Safari too.