Image change triggered by time and click
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?
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.
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);
});
});
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.
精彩评论