Changement d'image déclenché par le temps et cliquez sur

Question

Je veux qu'une image, qui n'est pas cliquée après 5 secondes, se transforme en une autre image, qui retourne ensuite à l'image originale lorsque l'on clique dessus.

Alors

image> (utilisateur ne clique sur l'image après 5 secondes)> l'image utilisateur à cliquer invite> (utilisateur clique)> Image Retour à l'original.

Des idées?

Answer 1

Bien sûr, pas un problème. Vous pouvez le faire avec le code suivant:

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

Vous pouvez voir in action here.

Answer 2

Ceci est très facile avec jquery

ce que nous allons faire est: lorsque le document est prêt, obtenir toutes les images avec la classe « promptimage », régler une minuterie sur eux, lorsque la minuterie passe -> changer de source à une autre source, et quand il est cliqué, définissez-le à src par défaut.

$(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 3

Je ne sais pas exactement où vous rencontrez des problèmes, donc je vais vous donner un aperçu général de ce que je pense est nécessaire:

image doit avoir un événement onclick qui peut déterminer quand il a été cliqué. Cela peut définir un drapeau et réinitialiser l'image si nécessaire. Il peut également annuler la minuterie à l'étape suivante si elle est toujours en cours d'exécution.

Lors du chargement de la page, définissez une temporisation de 5 secondes. Une fois que cela est en place, exécutez une fonction qui vérifie si l'image a été cliquée. Si cela n'a pas changé l'image. Si ça n'a rien fait.

Je suggérerais de rechercher ou de poser une nouvelle question sur des bits spécifiques avec lesquels vous rencontrez des problèmes.