Discussion :

[PandoraShys]

Bonjour,

Je découvre depuis peu le JS. Je me retrouve devant un problème délicat pour moi.

J'explique :

J'ai deux DIV.

Au survol avec la souris du premier DIV un fondu se fait sur ce premier DIV (Je modifie l'opacity en CSS). Ca fonctionne.

Lors de ce survol de ce premier DIV je souhaiterai dans le même temps que le deuxième DIV fasse de même. Je n'y arrive pas.

Voici le code :

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
 var a = document.getElementById('div_1');
var b = document.getElementById('div_2');
 
a.addEventListener('mouseover', fondu , false);
 
function fondu ()
    {  
     var n = this.style;       
     var i = 0;
     dep = function ()
        {
         n.opacity = i;
         i = i + 0.1;  
         if (i <= 1)
            {
                setTimeout(dep, 100);
            }
        };         
        dep();
    }

Comment faire pour coordonner le fondu sur les deux DIV alors que je survole le premier DIV avec la souris. Sachant que j'ai plusieurs boutons à gérer, je voudrais trouver un moyen de le faire sans mettre de variables en dur.

Peut-être passer par un objet litteral mais il me manque des connaissances pour savoir si c'est la bonne voie ou pas.

Pouvez-vous me donner une piste ?

Merci d'avance.

[NoSmoking]

Bonjour et bienvenue sur DVP.

tu peux utiliser la méthode apply permettant d'appliquer une fonction à un objet passé en paramètre.

Dans ce cas tu pourrais écrire

Code :

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

1
2
3
4
5
6
7
a.addEventListener(
  'mouseover',
  function(){
    fondu.apply(a);
    fondu.apply(a);
  },
false);

il te reste à rendre "efficace" la function fondu et ce fonction de l'objet( le this) auquel elle se rapporte.

Cela pourrait donner un truc du style de

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
function fondu() {
  var n = this.style;
  var i = 0;
  this.dep = function () {
    var that = this;
    n.opacity = i;
    i = i + 0.1;
    if (i <= 1) {
      setTimeout(function () {
        that.dep();
      }, 100);
    }
  };
  this.dep();
}

[PandoraShys]

Ok, merci pour ta réponse. J'ai compris, le pire c'est que ça marche

Merci beaucoup encore !

Bonne journée