Portée des variables / closures
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:
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:
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 :/
