How do I delay an image change?

delay image change

[mambo]

I am currently using the following function to change an image

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

eg

<a href="/test.html"
ONMOUSEOVER=" showLayer('testMenu'); changeImages('testImage', '/images/testImage-over.gif'); return true;"
ONMOUSEOUT="btnTimer(); changeImages('testImage', '/images/testImage.gif'); return true;">
<img name="testImage" src"/images/testImage.gif" width=137 height=28 border=0></a>

However onmouseout I want a sec delay before the image changes. How do I do this?

I am assuming I use the setTimeout function but can't seem to figure out how to use it.

Thanks

[isitreal]

Here's sort of a pseudocode version that will probably work:

function btntimer()
{
setTimeout("changeImages('testImage', '/images/testImage.gif')", 1000 );
}

......
onmouseout="btntimer();"

if you need the image names to be variable, then make them a parameter of btntimer, like:

function btntimer(imagedata1, imagedata2)
{
setTimeout("changeImages(imagedata1, imagedata2)", 1000 );
}

onmouseout="btntimer('testImage', '/images/testImage.gif');"