Opacité sur événement mouseout

Version imprimable

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:

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;

30/11/2012, 14h46
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...
30/11/2012, 16h05
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 ?
01/12/2012, 18h09
NoSmoking

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

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:

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.

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:

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);
}

02/12/2012, 16h30
guilten
Ok, donc le fait de passer à l'état fadeOut avant même que le fadeIn ne soit terminé va me stopper le timer de fadeIn et déclenché celui de fadeOut c'est bien ça ?

Tu peux m'expliquer cette ligne de code stp, j'ai encore un peu de mal à assimiler la syntaxe :
Code:

1 2 3 id.iTimer = id.iTimer || null; window.clearInterval(id.iTimer);
02/12/2012, 19h03
NoSmoking

Code:

id.iTimer = id.iTimer || null;

initialise la propriété iTimer de l'objet id si celui n'existe pas encore, il vaudra null et non undefined.

Pas sûr d'ailleurs que dans ce cas cela soit vraiment nécessaire attendu que la méthode clearInterval le gère en interne et que l'on l'initialise juste après, donc à virer mais c'est, me semble t-il, plus propre pour la lisibilité.
02/12/2012, 19h52
guilten

Oui j'ai testé et effectivement ça marche avec ou sans.
Mais cette partie là est moins évidente à comprendre que le reste :?

Merci pour l'aide :D
02/12/2012, 20h06
guilten

Encore un truc,
Pour tester la fonction, j'ai ajouter mes 2 événements dans la section head du document. Malheureusement rien ne se déclenche au survol de l'élément.

Par contre si je les positionnent juste après l'élément en question, oh miracle ça marche.

Comment je dois faire pour régler ce problème et laisser mes événements dans le head ?

Pourquoi faire ça en Javascript et pas en CSS ?

Code:

1
2
3
4
5
6
7
8
9
10
img {
     opacity: 0.25;
     transition: opacity 5s linear;
     -webkit-transition: opacity 2s linear;
     -moz-transition: opacity 2s linear;
}
 
img:hover {
     opacity: 1;
}

02/12/2012, 21h35
guilten

Pour la simple raison que j'ai envie de découvrir d'autres horizons :D
Je me suis pris au jeu de la programmation, même si là ça reste très simple.

Et puis faut dire aussi qu'on est vite limité en css quand il s'agit de réaliser des effets un peu plus poussés.
03/12/2012, 07h51
Bovino

Citation:

Envoyé par guilten

on est vite limité en css quand il s'agit de réaliser des effets un peu plus poussés.

J'imagine que tu n'as pas regardé Les meilleures réalisations CSS3
03/12/2012, 18h00
guilten

@ Bovino : Effectivement j'avais pas vu ce topic :D
La Joconde en css, ya pas à dire c'est fort !
03/12/2012, 19h19
NoSmoking

Citation:

Envoyé par guilten

Encore un truc,
Pour tester la fonction, j'ai ajouter mes 2 événements dans la section head du document. Malheureusement rien ne se déclenche au survol de l'élément.

Par contre si je les positionnent juste après l'élément en question, oh miracle ça marche.

il faut TOUJOURS qu'un élément existe avant de l'utiliser, mettre le SCRIPT dans le HEAD est très souvent suffisant lorsque l'on utilise un élément dans une fonction appelée par une action javascript.

Dis nous en plus sur la façon dont tu appelles les fonctions.

nota: que l'on ne s'y trompe pas le CSS3 est un véritable langage qui pourrait bien détrôner le javascript sur un certains nombre d'effets pour peu que tous les "vieux" navigateurs ....
03/12/2012, 20h10
Invité

mine de rien 7500 lignes de css pour une seule image ça fait beaucoup je vois plutôt ça comme un truc pour s'amuser
05/12/2012, 23h20
guilten

J'ai compris mon erreur.
En fait j'appelai mes fonctions avant même que le document est fini d'être chargé. Ce qui en toute logique ne pouvait pas marcher.
J'ai donc placé mon gestionnaire d'événements dans une fonction "init" que j'appelle après chargement de la page, et maintenant ça fonctionne !

Exemple :
window.onload = init;