JavaScript event handler to initiate after 3 seconds

Question

I need to initiate the event handler after 3 seconds of being focused on an image. How should I go about it?

Also, I need to trigger another event handler, when I am at a particular part of an image, say the approximate middle of the image. How do I do this?

Answer 1

For question #1: look into timers - you'd start it when the image is in focus (or the mouse hovers over it etc.), then it calls a function after 3 seconds (or any other period). The function would handle what you want to do after three seconds. (Maybe also check if the image is still "active".)

For question #2: One way to do this is Imagemaps, but there may be other/better options.

Hope this helps!

Answer 2

Use javascript's setTimeout and setInterval functions.

// alert after 2 seconds
setTimeout("alert('Hello World!')", 2000);

// alert every 2 seconds
setInterval("alert('Hello, world!')", 2000);

Answer 3

JavaScript

var timeout;
function message(){
    alert('Hey there');
}

function start(){
    timeout = setTimeout(message,3000);
}

function stop(){
    clearTimeout(timeout);
}

HTML

<img src="HappyCow.jpg" onmouseover="start()" onmouseout="stop()" />

The event handling is rough here (inline >.<), but I think this gets you started.