Discussion :

[Gurdile]

Bonjour, j'aimerai avoir une série d'image sur ma page web et que lorsqu'on passe sur une image, celle-ci descende et laisse place à du texte, j'ai donc coder 2 fonction qui marchait très bien pour une seule image, je me suis donc mit à essayer de la faire fonctionner pour ma série d'image mais c'est là que ça coince.

J'ai déjà chercher un peu, j'ai cru comprendre que c'était un problème de closures, j'ai donc chercher un peu, et niveau théorie je crois avoir plus ou moins compris mais en ce qui concerne la pratique.. J'ai essayer tout et n'importe quoi et au final ça donne surtout du n'importe quoi..

Donc je vous montre, ici voici le code des fonctions qui fonctionnent avec une image :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
var images = document.getElementsByClassName("imageAlentours");
            var corps = document.getElementById("corps");
            var masques = document.getElementsByClassName("masque");
            var textes = document.getElementsByClassName("texteImageAlentours");
            var margin = 50, opacity = 1;
            var descendre, monter, sourisSurTexte = false;
 
            function descendreImage ()
            {
                var bottom;
                clearTimeout(monter);
                if(margin < 150)
                {
                    descendre = setTimeout(descendreImage, 50);
                    margin += 5;
                    opacity -= 0.05;
                    images[0].style.opacity = opacity;
                    images[0].style.paddingTop = margin + "px";
                    textes[0].style.opacity = 1 - opacity;
                }
                else
                {
                    clearTimeout(descendre);
                    clearTimeout(monter);
                    return;
                }
 
                bottom = (150 + margin);
                masques[0].style.bottom = bottom + "px";
                textes[0].style.zIndex = "4";
            }
 
            function monterImage()
            {
                var up;
                clearTimeout(descendre)
                if(margin > 0 && sourisSurTexte == false)
                {
                    monter = setTimeout(monterImage, 50);
                    margin -= 5;
                    opacity += 0.05;
                    images[0].style.opacity = opacity;
                    images[0].style.paddingTop = margin + "px";
                    textes[0].style.opacity = 1 - opacity;
                }
                else
                {
                    clearTimeout(monter);
                    clearTieout(descendre);
                    return;
                }
 
                up = 150 + margin ;
                masques[0].style.bottom = up + "px";
            }
 
            images[0].addEventListener('mouseover', function(e){ sourisSurTexte = true; descendreImage()}, false);
            textes[0].addEventListener('mouseout', function(e){ sourisSurTexte = false;}, false);
            masques[0].addEventListener('mouseover', descendreImage, false);
            masques[0].addEventListener('mouseout', monterImage, false);

Et maintenant voilà ce que j'ai essayer de faire mais qui ne ressemblent plus à rien d'après moi :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
var images = document.getElementsByClassName("imageAlentours");
            var corps = document.getElementById("corps");
            var masques = document.getElementsByClassName("masque");
            var textes = document.getElementsByClassName("texteImageAlentours");
            var margin = 50, opacity = 1;
            var descendre, monter, sourisSurTexte = false;
 
            function descendreImage (i)
            {
				(function ()
				{
					var bottom;
					clearTimeout(monter);
					if(margin < 150)
					{
						descendre = setTimeout(descendreImage(i), 50);
						margin += 5;
						opacity -= 0.05;
						images[i].style.opacity = opacity;
						images[i].style.paddingTop = margin + "px";
						textes[i].style.opacity = 1 - opacity;
					}
					else
					{
						clearTimeout(descendre);
						clearTimeout(monter);
						return;
					}
 
					bottom = (150 + margin);
					masques[i].style.bottom = bottom + "px";
					textes[i].style.zIndex = "4";
 
					return function;
				})	
            }
 
            function monterImage(i)
            {
				(function ()
				{
					var up;
					clearTimeout(descendre)
					if(margin > 0 && sourisSurTexte == false)
					{
						monter = setTimeout(monterImage(i), 50);
						margin -= 5;
						opacity += 0.05;
						images[i].style.opacity = opacity;
						images[i].style.paddingTop = margin + "px";
						textes[i].style.opacity = 1 - opacity;
					}
					else
					{
						clearTimeout(monter);
						clearTieout(descendre);
						return;
					}
 
					up = 150 + margin ;
					masques[i].style.bottom = up + "px";
 
					return function;
				})	
            }
 
			 for(var i = 0; i < images.length; i++)
			 {
				images[i].addEventListener('mouseover', function(e){ sourisSurTexte = true; descendreImage(i)}, false);
				textes[i].addEventListener('mouseout', function(e){ sourisSurTexte = false;}, false);
				masques[i].addEventListener('mouseover', function(e) {descendreImage(i)}, false);
				masques[i].addEventListener('mouseout', function(e){monterImage(i)}, false);
			}

Je suis vraiment bloqué là dessus et j'ai conscience que je demande peut être beaucoup mais un indice pour m'aider à m'en sortir autrement qu'en faisant une fonction par image ne serai vraiment pas de refus :/

Encore désolé et merci d'avance :/

[Bovino]

Pose toi la question de ce que vaut la variable de boucle i non pas dans la boucle, mais au moment où le code de tes fonctions est exécuté...

Indice : Comment attribuer à des objets un onclick faisant appel à une variable de boucle ?

[Gurdile]

Bonjour et tout d'abord merci de ta réponse

Ensuite, j'y ai un peu réfléchi, et je dis peut être une grosse bêtise, c'est pour ça que je viens préfère en faire part ici avant de me creuser les méninges sur un code qui est peut être encore plus faux que le précédent (a)

Quand tu me dis de réfléchir à la variable i, j'ai penser :

Enfaite lorsque l'on passe la souris sur une image la boucle à déjà été effectué (lors de l’ouverture de la page) et donc la variable i vaut déjà images.length?

D'où les closures pour capturer la variable i à chaque instant c'est ça?

[Bovino]

Oui, c'est à peu près ça !

[Gurdile]

Bon.. J'ai encore essayer plusieurs choses, je ne vais pas aller rechercher tout ce que j'ai essayer mais en regardant le lien que tu m'avais mit plus haut, j'ai essayer ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 for(var i = 0; i < images.length; i++)
{
	images[i].indice = i;
	masques[i].indice = i;
	textes[i].indice = i;
	images[i].addEventListener('mouseover', function(e){ sourisSurTexte = true; descendreImage(this.indice);}, false);
	textes[i].addEventListener('mouseout', function(e){ sourisSurTexte = false;}, false);
	masques[i].addEventListener('mouseover', function(e) { descendreImage(this.indice);}, false);
	masques[i].addEventListener('mouseout', function(e){ monterImage(this.indice);}, false);
}

En laissant le reste inchangé.

Et ici mon navigateur me met qu'il lui est impossible d'afficher la page lorsqu'on passe sur une image..

Alors, est-ce que je suis sur une bonne voie ou pas du tout? J'ai vraiment du mal avec la pratique des closures.. :/