Bonjour, j'ai un problème avec un script
j'ai fait ca :

function affiche(){
  var images = document.getElementById("images").getElementsByTagName("span");
  for(var i=0,l=images.length;i<l;i++){
    setTimeout(affiche_image(images[i].style),10);
  }
}
function cache(){
  var images = document.getElementById("images").getElementsByTagName("span");
  for(var i=0,l=images.length;i<l;i++){
    setTimeout(cache_image(images[i].style),10);
  }
}

function affiche_image(obj){
	obj.visibility = "visible";
}
function cache_image(obj){
	obj.visibility = "hidden";
}

mon html :

<div id="images">
<p align ="center">
	<span class = "img"><img  src ="images/plan.jpg" width=200px/></span><br/>
	<span class ="img1"><img  src ="images/digicode.jpg" width=200px/></span>
	<a href="index.html">
		<img src="images/logoopt.gif" 
		onMouseOver="this.src='images/logoopt.gif'; affiche();"
		onMouseOut="this.src='images/logonoir.gif'; cache();" height=300px></img>
        </a>
	<span class = "img1"><img  src ="images/logosimple.gif" width=200px/></span><br/>
	<span class = "img"><img src ="images/digicode.jpg" width=200px/></span>
</p>

J'aimerai que les images deviennent visibles une à une lorsque la souris passe sur le lien. Actuellement, seule la première image sur les 4 s'affiche et s'efface lors du passage de la souris, les autre restent invisibles. Si vous voyez mon erreur n'hésitez pas

var images;
var taille;

function affiche() {

  images = document.getElementById("images").getElementsByTagName("span");
	taille = images.length;
	
  afficheRecursif(0);
}

function afficheRecursif(index) {

	if ( index < taille ) {
	
		affiche_image(images[index].style);
		setTimeout("afficheRecursif("+index+"+1)", 200);
	}
}

function cache() {

  images = document.getElementById("images").getElementsByTagName("span");
  taille = images.length;
	
  cacheRecursif(0);
}

function cacheRecursif(index) {

	if ( index < taille ) {
	
		cache_image(images[index].style);
		setTimeout("cacheRecursif("+index+"+1)", 200);
	}
}

function affiche_image(obj) {

	obj.visibility = "visible";
}
function cache_image(obj) {

	obj.visibility = "hidden";
}

Merci ca marche. C'est un peu plus compliqué mais c'est bien.

Ca ne peut pas se résoudre simplement avec des closures dans les setTimeout() ?

function affiche(){
  var images = document.getElementById("images").getElementsByTagName("span");
  for(var i=0,l=images.length;i<l;i++){
    setTimeout((function(i){
      return function() {
        affiche_image(images[i].style);
      };
    })(i),10);
  }
}
function cache(){
  var images = document.getElementById("images").getElementsByTagName("span");
  for(var i=0,l=images.length;i<l;i++){
    setTimeout((function(i){
	  return function() {
	    cache_image(images[i].style);
	  };
	})(i),10);
  }
}

function affiche_image(obj){
	obj.visibility = "visible";
}
function cache_image(obj){
	obj.visibility = "hidden";
}

Parce que si oui, c'est quand même moins fouilli que ta méthode, loacast...

Avec ta méthode golmote les 4 images s'affichent en même temps

function affiche(){
  var images = document.getElementById("images").getElementsByTagName("span");
  for(var i=0,l=images.length;i<l;i++){
    setTimeout((function(i){
      return function() {
        affiche_image(images[i].style);
      };
    })(i),200*i);
  }
}
function cache(){
  var images = document.getElementById("images").getElementsByTagName("span");
  for(var i=0,l=images.length;i<l;i++){
    setTimeout((function(i){
	  return function() {
	    cache_image(images[i].style);
	  };
	})(i),200*i);
  }
}

function affiche_image(obj){
	obj.visibility = "visible";
}
function cache_image(obj){
	obj.visibility = "hidden";
}

Sa méthode est bien il suffisait de rajouter *i au temps du setTimeout.

Citation : golmote

Parce que si oui, c'est quand même moins fouilli que ta méthode, loacast...

Fouilli, carrément. Je n'arrivais pas à faire fonctionner le setTimeout autrement qu'avec une fonction récursive :D.

Exact, j'avais oublié que tu voulais un décalé.

loacast, les closures, c'est magique
(Et c'est le cas classique où elles sont nécessaires : l'appel d'un setTimeout dans une boucle, où la fonction appelée prend en paramètre la variable de la boucle )

Ben merci beaucoup pour vos réponses.