CODEWITHSUNDEEP
javascriptdomdom-events
amit
amit

Reputation: 10261

JavaScript event handler to initiate after 3 seconds

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?

Upvotes: 2

Views: 5635

Answers (3)

Ryan Florence
Ryan Florence

Reputation: 13483

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.

Upvotes: 4

aleemb
aleemb

Reputation: 32105

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);

Upvotes: 4

Thorsten
Thorsten

Reputation: 13181

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!

Upvotes: 1

Related Questions