Click to See Complete Forum and Search --> : Active mouseover


Sam
09-29-2003, 09:04 PM
I've got a question regarding the mouseover event... I could I make a script that does something while the mouse is over an object rather than when it enters the object...
for example,

//begin pseudo code
while(mouseover)
{
img.style.left-=1;
}

Sam
09-30-2003, 01:51 AM
here's my attempt thus far, watchMove is called by an images onmouseover:

function watchMove(xPos,yPos,xOff,yOff,dir)
{
xPos=parseInt(xPos)-5;
zImg.style.left=xPos;
mX=window.event.clientX;
mY=window.event.clientY;
xIni=0;
xOff=21;
if(parseInt(mX)>parseInt(0)&&parseInt(mX)<=parseInt(21)&&parseInt(mY)>parseInt(432)&&parseInt(mY)<=parseInt(453))
{
timer=setTimeout('moveMe('+xPos+','+yPos+','+xOff+','+yOff+','+dir+')',10);
}
}
function moveMe(xPos,yPos,xOff,yOff,dir)
{
clearTimeout(timer);
watchMove(xPos,yPos,xOff,yOff,dir);
}

This all seems to work theorhetically, but it dies the second time it tries to loop, IE's debug says 'Object Required'. My guess is that the window.event is somehow dying after the loop incurs, and am wondering if anyone knows of a way to remedy this...
let me know with your ideas...

skriptor
09-30-2003, 04:11 AM
Hi,
you're right: object event was died.

Here's another try:

<html><head><script>
var myTimer = null;
var myObj;
function startMove(){
myObj = window.event.srcElement;
if ( myObj.style.pixelLeft < 200 ) {
myTimer = setInterval( "moveMe()", 10 );
}
}
function moveMe(){
myObj.style.pixelLeft += 5;
if ( myObj.style.pixelLeft > 200 ) stopMove();
}
function stopMove(){
if ( myTimer ) {
clearInterval( myTimer );
myTimer = null;
}
}
</script>
</head>
<body>
<img style="position:absolute" src="pic.gif" onmouseover="startMove()">
</body></html>

Good luck, skriptor

Sam
09-30-2003, 03:24 PM
sweet, that works great...
how would i go about moveing a different img on mouseover?
eg:
<img id=1 src=pic.jpg>
<img id=2 src=pic1.jpg onmouseover="movePic1()">
?

skriptor
10-01-2003, 12:16 AM
Hi,
I'm not sure what you mean exactly, but this is how I understand:


function startMove( whichPic ){
myObj = document.getElementById( whichPic );
if ( myObj.style.pixelLeft < 200 ) {
myTimer = setInterval( "moveMe()", 10 );
}
}


and body

<img id="p1" style="position:absolute" src="pic1.gif" onmouseover="startMove('p2')"><br />
<img id="p2" style="position:absolute" src="pic2.gif" onmouseover="startMove('p1')">


Good luck, skriptor