Image change triggered by time and click

Question

I want an image, which is not clicked after 5 seconds, to turn into another image, which then returns to the original image when clicked.

So

image > (user not clicked on image after 5 secs) > image prompting user to click > (user clicks) > image back to original.

Any ideas?

Answer 1

This is very easy with jquery

what we will do is: when the document is ready, get all the images with class "promptimage", set a timer on them, when timer passes -> change their source to another source, and when it is clicked, set it to default src.

$(function(){
   var original_src = $('.promptimage').attr("src");
   $('.promptimage').attr("src",'set your image source with the prompting image').delay(800);
   $('.promptimage').click(function(){
     $('.promptimage').attr("src",original_src);
   });
});

Answer 2

I'm not sure exactly where you are having problems so I'll give a general overview of what I think is needed:

Image should have an onclick event that can determine when it has been clicked. This can set a flag and reset the image if necessary. It can also cancel the timer in the next step if it is still running.

On page load set a 5 second timer. Once that is up run a function that checks if the image has been clicked. If it hasn't change the image. If it has do nothing.

I'd suggest search or reasking a new question on specific bits you are having problems with.

Answer 3

Sure, not a problem. You can do it with the following code:

HTML

<img id="clickable" src="http://fullahead.org/gallery/toronto-2010/image/thumb/DSC_3356.jpg" style="cursor: pointer" title="Clicky!"/>

Javascript

// Get a reference to the image and save its original source
var img = document.getElementById('clickable');
var origSrc = img.src;

// Create the timeout to change the source (2 seconds in code below)
var timeout = setTimeout(function(){
    img.src = 'http://fullahead.org/gallery/ilse-de-grand-calumet-2010/image/thumb/DSC_3163.jpg';   
}, 2000);

// Register the click event handler for the image and clear the timeout
img.onclick = function(){
    clearTimeout(timeout);
    this.src = origSrc;    
}

You can see it in action here.