Discussion :

[starr]

Bonjour,
j'ai 4 photos miniatures générées dans un tableau venant de ma bdd,
j'ai mis un mouseOver sur cette ligne avec la fonction show_popup.
lorsque l'on va une premiere fois sur une miniature l'effet opacité marche bien,
mais lorsqu'on va sur une deuxième fois j'ai un bug, y a des sacades et l'image clignote sans arrette. pour mon opacité j'utilise le code de spaceFrog que j'ai voulu mettre dedans.

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
41
42
43
44
45
46
47
function show_popup(image,hauteurs,largeurs)
	{
		//si l'image existe déja, on la delete pour en replacer une autre direct
		if(document.getElementById('test'))
		{
			var noeud=document.getElementsByTagName("div")[5].childNodes[1];
			disparu = document.getElementsByTagName("div")[5].removeChild(noeud);
		}									
		var nouveauB = document.createElement("div");			
		var texte_nouveauB = document.createTextNode("");
		nouveauB.appendChild(texte_nouveauB);
		nouveauB.setAttribute("id","test");
		nouveauB.setAttribute("style","-moz-opacity:0;");
		//si c'est ie
		if(!!document.all)
		{		nouveauB.style.setAttribute("cssText","filter:alpha(opacity=0);");}
 
		document.getElementById("toto").insertBefore(nouveauB, document.getElementById("tata"));				
			document.getElementById('test').style.display = "block";
		var test = document.getElementById('test')
		test.style.width = largeurs+'px';
		test.style.height = hauteurs+'px';
		test.style.backgroundImage = 'url('+image+')';
		test.style.marginLeft = "auto";
		test.style.marginRight = "auto";
		test.style.zIndex = 100;
 
//_______OPACITE__________ code de spaceFrog
 
		var max = 100;
		var min = 0;
		var opacite=min;
		up=true;
		var IsIE=!!document.all;
		var ThePic=document.getElementById("test");
		function fadePic()
		{		
			if (opacite<max && up)
			{opacite +=4;}
			//	if (opacite>min && !up){opacite-=2;}
			if (opacite>=max){up=false;}
			 if   (opacite<=min){up=true;}
			IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("test").style.opacity=opacite/100;
		}
	   setInterval(function(){fadePic();},100)		
 
	}

donc, chaque fois que je recharge ma page, et que je vais sur une des 4 vignette, ça fonctionne, mais quand je vais sur une deuxieme, ou alors tout betement que je retourne sur la meme, bug et l'image clignote...

si quelqu'un peut m'aider ça serait cool,
merci d'avance

[SpaceFrog]

tu as un probmème de répetition du setInterval...

il ne faut avoir qu'une seule occurence de la fonction qui tourne à la fois ...
Tes cligonttement viennent du fait que plusieurs occurences de la fonction entrent en conflit ..

il te faut avoir un flag qui determine si la fonction tourne ou pas

[starr]

merci pour ta réponse SpaceFrog,
un flag? c'est un if en fait?
j'ai essayer de tester ce matin la fonction ClearInterval, je pensais que ça allait marcher, mais sans succes :s
help

[SpaceFrog]

un flag (drapeau) est une variable témoin ...

var running = false

en début de fonction tu testes:

Code :

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

1
2
3
if(running){return false;}
 running = true;
// ... le reste de la fonction

et sur un teste sur le niveau d'opactité tu le remets à false

[starr]

voila j'y suis presque arrivé, maintenant l'opacité fonctionne sur la premiere image, et il n'y plus de bug quand on va sur les autres, cependant il n'y a pas d'effet d'opacité sur les autres :p
si jamais tu sais me dire le hic ?
thanks d'avance

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
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
	function show_popup(image,hauteurs,largeurs)
	{	
 
    running = true;
 
		//si l'image existe d‚ja, on la delete pour en replacer une autre direct
		if(document.getElementById('test'))
		{
		   running = false;
 
			var noeud=document.getElementsByTagName("div")[5].childNodes[1];
			disparu = document.getElementsByTagName("div")[5].removeChild(noeud);
		}	
 
		var nouveauB = document.createElement("div");			
		var texte_nouveauB = document.createTextNode("");
		nouveauB.appendChild(texte_nouveauB);
		nouveauB.setAttribute("id","test");
		nouveauB.setAttribute("style","-moz-opacity:0;");
		//si c'est ie
		if(!!document.all)
		{		nouveauB.style.setAttribute("cssText","filter:alpha(opacity=0);");}
 
		document.getElementById("toto").insertBefore(nouveauB, document.getElementById("tata"));				
			document.getElementById('test').style.display = "block";
		var test = document.getElementById('test')
		test.style.width = largeurs+'px';
		test.style.height = hauteurs+'px';
		test.style.backgroundImage = 'url('+image+')';
		test.style.marginLeft = "auto";
		test.style.marginRight = "auto";
		test.style.zIndex = 100;
 
		//ici c'est le conteneur de l'image qui garde une taille fixe pour stabiliser l'image
	document.getElementById('toto').style.display = "block";
	   var cadre = document.getElementById('toto');
	    cadre.style.backgroundColor = "#CBE1B7";
    	cadre.style.width = "400px";
	   	cadre.style.height = "400px";
	   	cadre.style.marginLeft = "auto";
	   	cadre.style.marginRight = "auto";
	   	cadre.style.borderTop = "2px solid black";	
	   	cadre.style.zIndex = 1;
 
 
//_______OPACITE______________________________________________________________________________________________________
		var max = 100;
		var min = 0;
		var opacite=min;
		up=true;
		var IsIE=!!document.all;
		var ThePic=document.getElementById("test");
		function fadePic()
		{		running = true;
			if (opacite<max && up)
			{opacite +=5;}
			//	if (opacite>min && !up){opacite-=2;}
			if (opacite>=max){up=false;running = false;}
			if   (opacite<=min){up=true; running = true}
			IsIE?ThePic.filters[0].opacity=opacite:document.getElementById("test").style.opacity=opacite/100;
		}
 
		if(running)
		{  setInterval(function(){fadePic();},100);}
 
 
 
 
	}