setTimeout in Event Handlers

[bassleader]

Hi guys,

I am writing a script that triggers an animation when the mouse moves over an area of the screen. Obviously I am using onMouseover to start the animation and onMouseout to stop it. I need to call the function in onMouseover repeatedly until the mouse moves out. This function also takes a string argument, so I have to be careful about quotation marks. The code I have at the moment looks a bit like this:

//in the head section:
var timeOutCall = "setInterval('myFunction(arg)', 30)";
var caller = null;

//in the HTML:
<td id="someid" onMouseover="if(caller == null){arg = 'someid'; caller = eval(timeOutCall);}" onMouseout="stopAnim();">

//in an external file:
function stopAnim(){
clearInterval(caller);
caller = null;
//other code to reset the cell
}

When the mouse moves over the table cell, the error "caller is undefined" occurs, in spite of me defining it in the head section. I have moved the declaration all over the place, but to no avail. What am I doing wrong?

Thanks for your time,

BL

[Mrs G]

setInterval('myFunction(arg)', 30)"; needs the ID "caller"



caller=setInterval('myFunction(arg)', 30)";


You may still have to declare caller depending on your layout


var caller = null;

[bassleader]

Thanks, I fixed the problem this way:

<td id="someid" onmouseover="newFunc('someid');">

//external script:
var caller;

function newFunc(elem){
caller = setTimeOut('myFunction(elem)', 50);
}

Not sure why this works and the other way doesn't though.

BL