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

[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 :

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

1
2
3
 
id.iTimer = id.iTimer || null;
window.clearInterval(id.iTimer);

[NoSmoking]

Code :

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

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é.

[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

[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 ?

[SylvainPV]

Pourquoi faire ça en Javascript et pas en CSS ?

Code css :

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

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

[guilten]

Pour la simple raison que j'ai envie de découvrir d'autres horizons
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.

[Bovino]

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

[guilten]

@ Bovino : Effectivement j'avais pas vu ce topic
La Joconde en css, ya pas à dire c'est fort !

[NoSmoking]

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 ....

[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

[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;