Discussion :

[guilten]

Bonjour,

Je rencontre un problème pour changer l'opacité d'une image au retrait de la souris (mouseout). J'arrive bien à lui donner l'opacité que je souhaite au moment du survol mais impossible de lui définir l'opacité au retrait de la souris.
J'appelle la même fonction au survol et au retrait et j'ai définit mes événements dans une fonction setup.

Voici le code utilisé :

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
 
function modifyOpacity(id, opacity) {
	var tt = document.getElementById(id);
	var currentOpacity = img1.objGetOpacity();
	if (currentOpacity > 0.5) {
          currentOpacity -= 0.1;
	  img1.objSetOpacity(currentOpacity);
	  setTimeout("modifyOpacity()", 20);
    } else if (currentOpacity < 1) {
	  currentOpacity += 0.1;
	  img1.objSetOpacity(currentOpacity);
	  setTimeout("modifyOpacity()", 20);
	}
}
function changeOpacity(evnt) {
	if (evnt.type == "mouseover") {
	  modifyOpacity("picto_facebook", 0.5);
	} else if (evnt.type == "mouseout") {
	  modifyOpacity("picto_facebook", 0.9);
	}
}
function setup() {
  img = document.getElementById("picto_facebook");
  img1 = new ImgObj(img);
  // Valeur d'opacité initiale
  img1.objSetOpacity(0.9);
  // Evénements
  img.addEventListener("mouseover", changeOpacity, false);
  img.addEventListener("mouseout", changeOpacity, false);
}
window.onload=setup;

[Bovino]

Tu as un gros problème de logique dans modifyOpacity() (en dehors du paramètre opacity non utilisé).
Lorsque tu survoles l'image, tu diminue l'opacité, mais dans chaque condition, tu relances un setTimeout(), donc l'image va éternellement osciller entre 0.4 (cas où l'appel suivant va ajouter 0.1) et 0.5 (cas où l'appel suivant va retirer 0.1).
Il y a un moment où il faut stopper le timer...

[guilten]

Ok je comprend ce que tu veux dire pour le timer mais est il possible d'utiliser la même fonction pour les événements mouseover et mouseout, ou bien faut il impérativement créer une fonction pour chaque événement ?

[NoSmoking]

Bonjour,
tu peux jeter un coup d'oeil à Galerie avec effet de fondu, tiens c'est de Bovino me semble t-il !

[guilten]

Bon finalement je suis reparti de zero après avoir suivi quelques tutos et explications sur le fonctionnement des timers.

J'ai réussis à faire quelque chose qui fonctionne mais un bug se produit quand je rentre et sors trop rapidement sur l'élément.

Voici mon 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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
 
function fadeOut(id, downOpacity, speed) {
 
	var currentOpacity = id.style.opacity * 100;
	// Si l'élément n'a pas d'opacité définit
	if(!currentOpacity) {
		// On définit une valeur par défaut
		setOpacity(id, 100);
		currentOpacity = id.style.opacity * 100;
	}
	var timer = window.setInterval(function() {
        currentOpacity -= 1;
        id.style.opacity = currentOpacity / 100;
        if (currentOpacity === downOpacity) {
	        window.clearInterval(timer);
        }
    }, speed/1000);
}
function fadeIn(id, upOpacity, speed) {
 
	var currentOpacity = id.style.opacity * 100;
	var timer = window.setInterval(function() {
        currentOpacity += 1;
        id.style.opacity = currentOpacity / 100;
        if (currentOpacity === upOpacity) {
	        window.clearInterval(timer);
	        //alert(currentOpacity);
        }
    }, speed/1000);
}
function setOpacity(id, opacity) {
	id.style.opacity = opacity / 100;
}
 
addEvent(getById("picto_facebook"), "mouseover", function(){
	fadeOut(this, 40, 5)
});
addEvent(getById("picto_facebook"), "mouseout", function(){
	fadeIn(this, 86, 5)
});

Merci pour le lien.

[NoSmoking]

Ton dysfonctionnement provient du fait que tu ne "clear" pas le timer en cours avant d'en lancer un autre, il te faut donc le "clearer" en début de fonction.

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
function fadeOut(id, downOpacity, speed) {
	// init iTimer si not existe and kill
	id.iTimer = id.iTimer || null;
	window.clearInterval( id.iTimer);
 
	var currentOpacity = id.style.opacity * 100;
	// Si l'élément n'a pas d'opacité définit
	if(!currentOpacity) {
		// On définit une valeur par défaut
		setOpacity(id, 100);
		currentOpacity = id.style.opacity * 100;
	}
        // on utilise id.iTimer par la suite
	id.iTimer = window.setInterval(function() {
        currentOpacity -= 1;
        id.style.opacity = currentOpacity / 100;
        if (currentOpacity === downOpacity) {
                window.clearInterval( id.iTimer);
        }
    }, speed/1000);
}