11540 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Améliorer javascript

Bonjour !
Je suis en train d'apprendre le javascript, mais pour l'instant je débute!
Donc voila, j'ai ce code pour remplacer une image par une autre en cliquant dessus,
seulement je voudrais l'améliorer pour qu'il y ai plusieurs images, et donc passer de la photo1 à la photo2 au premier clic, puis de la photo2 à la photo3 au deuxième, etc..
La réponse est surement très simple,mais pour l'instant mes tentatives ne marchent pas!

pour le javascript :
<script type="text/javascript">

		function change()
		{
		 a = document.getElementById("test").getAttribute("src");
		 if (a=='photo1.png') {
                      document.getElementById("test").src='photo2.png';
                  }
				  
	    

                  else {
                 document.getElementById("test").src='photo1.png';
                  }

		}
		</script>



Et voila pour le body: 
<body>
		  
		  <img src="photo1.png" id="test" onclick="change();"/>
		 
		  </body>



Merci d'avance! Smiley smile
Salut,

tu peut utiliser une tableau JS ( que tu passe en paramètre ) pour gérer ta séquence d'images

<script type="text/javascript">
  function change(elmt, sequence)
  {
    var src = elmt.getAttribute("src"); // On récupére l'url le l'image actuellement affichée
    var last = null;
    
    for(var k in sequence) // On parcours le tableau contenant la séquence des images à afficher
    {
      if( ( last == src ) ) // Si l'image précedente dans la séquence est celle affichée
      {
        elmt.setAttribute('src', sequence[k]); // On affiche l'image actuelle
        return;  // On arréte la fonction
      }
      
      last = sequence[k]; // On mémorise l'url de l'image précédente
    }
    
    elmt.setAttribute('src', sequence[0]); // Par défaut on affiche la première image (si c'est le premier chargement ou si la derniére image est affichée)
  }
</script>

<img src="photo1.png" id="test" onclick="change(this, ['photo1.png','photo2.png']);"/>

Modifié par JJK801 (06 Oct 2012 - 16:11)
Sujet clos
Aller à