Résolu Apparition d'un GIF après appuie sur un bouton

[Yoann_]

Bonjour,
quelqu'un c'est-il comment faire apparaître un GIF après que j'ai appuyez sur un des boutons de mon site et enfin me redirige sur une autre page de mon site?

Si vous ne voyez pas ce que je recherche, vous appuyez sur un bouton, celui-ci disparaît et laisse apparaître mon GIF et puisse quand même me rediriger sur une autre page après X secondes ou la fin du GIF par exemple.

Je pense qu'il faudra utiliser un script, mais je ne sais pas lequel..
Voilà, merci d'avance !

 

[Wims]

Avec du Javascript c'est possible :

On créer le bouton avec un input :

<input type="button" id="btn" value="Show Gif" onclick="showGif()"/>

Je dis que le type de l'input est un "button" comme ça il a la forme d'un boutton.
Je lui définis un ID "btn" pour que je puisse le faire disparaitre avec Javascript, et je dis que quand on clique dessus, qu'il déclenche la fonction "showGif".
En dessous du bouton je vais mettre l'image (le gif dans notre cas) en invisible par défaut (le JS va faire en sorte de le faire apparaitre lors du clique) :

<img id="gif" style="display: none;" src="http://www.nyan.cat/cats/original.gif"/>

Je lui définis l'ID "gif" pour que le Javascript puisse le faire apparaitre lors du clique.
"style="display:none;" permet de cacher le gif.

Au niveau du JavaScript :

function showGif()
{
     document.getElementById("gif").style.display = "block";
     document.getElementById("btn").style.display = "none";
}

Je créer la fonction "showGif" et je dis tout simplement que l'élément qui a l'ID "gif" (donc notre image) est comme style "display: block" donc ça modifiera le "none" que l'on a mit précédemment en "block" ce qui fera donc apparaitre le gif.
Une fois que le gif apparait, on va faire l'inverse pour le bouton, on lui donne "style="display: none" pour le faire disparaitre.

C'est du code assez basique, mais j'ai essayé de détailler un maximum pour que tu comprennes.


Voici le code final :

<script type="text/javascript">
        function showGif()
        {
            document.getElementById("gif").style.display = "block";
            document.getElementById("btn").style.display = "none";
        }
</script>

<input type="button" id="btn" value="Show Gif" onclick="showGif()"/>
<img id="gif" style="display: none;" src="http://www.nyan.cat/cats/original.gif"/>

Pour la redirection il faut que tu utilises un timer que tu mettras dans la même fonction, je te laisse chercher (après X secondes je redirige vers une page..).

 

[Yoann_]

Ok merci, je teste sa ce soir !

 

[Yoann_]

Ducoup voici ce que j'ai fait pour faire la redirection :

setTimeout(ChangementPage, 3000);

function ChangementPage() {
document.location.href="MaRedirection";
}

Merci à toi

 

[KitKatRG]

Salut,
J'ai déplacé ta discussion en section Résolu.

Bonne fin d'après-midi,
KitKat.