Rejouer un gif animé après quelques minutes

Rejouer un gif animé après quelques minutes - HTML/CSS - Programmation

Marsh Posté le 19-02-2017 à 19:44:59    

Bonjour,
 
voilà, j'ai un soucis, j'ai crée un gif qui ne joue qu'une fois, normal je ne veux pas qu'il se joue en boucle sans arrête.
 
Mais ce que j'aimerais, c'est que toutes les 5 minutes, le gif se remette à jouer.
 
Je serais ravis d'avoir un peu d'aide sur ce coup là.
 
Pour l'exemple c'est ici : http://padak-or.pagesperso-orange.fr/index.htm
l'animation est en bas à droite, elle se joue une fois et voilà, j'aimerais que toutes les 5 minutes ça se rejoue.
 
Merci d'avance.

Reply

Marsh Posté le 19-02-2017 à 19:44:59   

Reply

Marsh Posté le 21-02-2017 à 00:16:08    

Il suffit de redonner une src a la baslise img, comme ceci:
 
document.querySelector("#aaa" ).src="images/gifanime.gif"
 
avec aaa etant l'id de l'image.
Tu peux encapsuler ce code dans une fonction lancee toutes les 5 minutes via setInterval.
 
Si tu as besoin de plus d'aide n'hesite pas.

Reply

Marsh Posté le 21-02-2017 à 00:45:27    

Merci pour la réponse rapide, tu pourrais me donner un exemple de ce que je dois mettre dans mon code html à la place de mon <img src=***>
 
Je sais je suis chiant, mais j'avais pas fait de html depuis longtemps et là je suis un peu largué.  
 
Merci d'avance

Reply

Marsh Posté le 21-02-2017 à 09:11:14    

Je t'ai fait un codepen pour comprendre:
http://codepen.io/anon/pen/WRVReo?editors=1011
 
Dans mon exemple je relance l'animation toutes le 10 secondes.
Dans le codepen, comme je n'ai qu'une image, je peux simplement faire document.querySelector("img" ). Dans ta page ce serait ambigü comme sélecteur, donc tu dois la rechercher autrement, mais il n'y a pas qu'une manière de faire.
 
Tu peux lui donner une classe particulière, ou un id, ou la rechercher en fonction de la place dans l'arbre du dom, c'est selon ta préférence.
 
Si tu veux lui donner un id, tu peux regarder cet autre codepen:
http://codepen.io/anon/pen/YNmNwm?editors=1011

Reply

Marsh Posté le 21-02-2017 à 13:57:03    

Merci encore, ça marche nickel.

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed