Bonjour à tous et à toutes,

j'ai besoin d'un petit coup de pouce.

Je vous explique... J'ai une image (image1) dans ma page et en dessous un bouton.
Quand je clique sur le bouton, une image (image2) remplace la précédente (les deux images ont la même taille).

Pour ce faire, j'ai dans mon CSS :

#cf2 {
  position:relative;
  width:100%;
  height:auto;
  margin:0 auto;
}

#cf2 img {
	position:absolute;
	left:0;
	-webkit-transition: opacity 1s ease-in-out;
	-moz-transition: opacity 1s ease-in-out;
	-o-transition: opacity 1s ease-in-out;
	transition: opacity 1s ease-in-out;
	top: 1px;
}

#cf2 img.transparent {
opacity:0;
}
#cf_onclick {
cursor:pointer;
}

et dans mon html :

<script>
  $(document).ready(function() {
    $("#cf_onclick, #cf2 img.top").click(function() {
      $("#cf2 img.top").toggleClass("transparent");
    });
  });
  </script>

<div id="cf2">
<img class="bottom" src="image2.jpg" />
<img class="top" src="image1.jpg" />
</div> 
       
<a href="#" class="bouton" id="cf_onclick">BOUTON</a>

J'ai deux petites questions :

1/ comment faire pour empêcher le retour de l'image 1 ?
En effet, en re-cliquant l'image 1 revient et remplace l'image 2. C'est sans fin!

2/ comment faire pour ajouter une temporisation et une redirection vers une autre page web?
On clique sur le bouton, l'image 2 remplace l'image 1, 5 secondes s'écoulent et l'internaute est redirigé vers une autre page web.

Merci à tous et à toutes pour ce grand coup de main.
Cela fait 3 jours que je cherche et que je ne trouve pas, je désespère un peu!

C'est pas la même question ou presque que celle là :
html-html5-xhtml-css/transition-entre-i ... 78193.html

bonjour Arthur,

Effectivement j'ai peaufiné ma demande et je l'ai mise sur le bon forum (à mon sens).
Et je n'ai trouvé nulle part où supprimer mon premier post...

Par rapport à ta réponse sur l'autre post, je souhaiterai que le changement se fasse en douceur... regarde ici : https://jsfiddle.net/marcos_sol/2by7huyw/

Mais je veux que le changement de la photo ne se fasse qu'une seule fois en cliquant sur le lien et qu'ensuite au bout de 5 secondes (après avoir cliqué sur le lien) une redirection s’opère vers une autre page Web.

Merci à toi.

Effectivement j'ai peaufiné ma demande et je l'ai mise sur le bon forum (à mon sens).
Et je n'ai trouvé nulle part où supprimer mon premier post...

Afin de conserver une bonne lisibilité et cohérence sur le forum, les utilisateurs ne peuvent pas supprimer leurs posts, mais peuvent les modifier pendant il me semble 1h après les avoir postés.
La bonne façon de faire dans ton cas est soit de modifier ton message, soit de continuer dans le même sujet en ajoutant des précisions.

Du coup je remet ma réponse initiale ici et je supprime l'ancien sujet :

Pour faire cela, il te faut du javascript, avec les fonctions window.setTimeout() pour attendre 10 secondes, puis window.location pour rediriger vers une autre page.
https://developer.mozilla.org/fr/docs/W ... setTimeout
https://developer.mozilla.org/fr/docs/W ... w/location

Pour la transition entre images, voila un exemple avec Jquery : http://jsfiddle.net/HpmN7/

Par rapport à ta réponse sur l'autre post, je souhaiterai que le changement se fasse en douceur... regarde ici : https://jsfiddle.net/marcos_sol/2by7huyw/

Mais je veux que le changement de la photo ne se fasse qu'une seule fois en cliquant sur le lien et qu'ensuite au bout de 5 secondes (après avoir cliqué sur le lien) une redirection s’opère vers une autre page Web.

Et bien il faut que tu mette un eventlistener sur la fin de la transition CSS pour ensuite faire ta redirection :
https://developer.mozilla.org/fr/docs/W ... nsitionend

let element = document.getElementsByClassName("top");
element[0].addEventListener("transitionend", function(event) {
  alert('Redirection !');
}, false);

j'ai mis en place le code que tu m'as donné pour la transition entre images et je n'arrive pas à le faire fonctionner :
http://vgtv.fr/test.html

Peux tu me dire où j'ai fais une erreur?

Le 2ème code que je t'ai donné était fait pour fonctionner avec ton propre code à base de transition CSS

pour que le script ne s'exécute qu'une seule fois (image 2 remplace l'image 1), il a été modifié en

j'en arrive à ma 2eme question : comment intégrer dans ce script ton bout de code ?
je voudrais que l'internaute soit redirigé vers l'url une fois que l'image a été modifiée au bout de 5 secondes.

et est-ce possible qu'au lieu d'une url, l'internaute soit redirigé vers une url type formulaire avec des champs cachés?

merci beaucoup pour ton aide.

En soit ça ne sert pas à grand chose de bloquer l'exécution à 1 seule fois puisque de toute façon tu va le rediriger vers une autre page.

Pour l'intégration de mon code, je te laisse essayer de le comprendre et de l'intégrer car j'ai fait le plus dur donc à toi de tester et d'apprendre en le faisant

je viens de comprendre...

j'ai modifié le script

super merci, ça fait avancer plus vite quand on échange.
est-il possible de faire une redirection vers un lien en mode POST (form) en y glissant des champs cachés?