Bonjour,

Je fais en ce quelques tests de script javascript pour r�aliser un fade in sur un mouseover et un fade out sur un mouseout.

J'ai fais un petit bout de script qui marche bien quand il y a qu'un seul objet concern� par les fades. Mais d�s que je mets plusieurs objets a traiter �a merde.

Je m'explique : je ne souhaite pas faire des fades sur plusieurs objets simultan�ment, �a c'est dit, mais je souhaite faire des fades sur des objets ind�pendants. Le truc c'est que lors du passage de la sourie sur les �l�ments, si un des �l�ments n'a pas fini son fade et que l'autre le commence �a merdouille �a fait si je peux dire �a comme �a des interf�rences.

Alors voila le script Js + html + css :

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
70
71
72
73
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<script type="text/javascript">
		function opacityin(id, opacStart, opacEnd, millisec) {
 
			var speed = Math.round(millisec / 100);
			var timer = 0;
 
			if(opacStart > opacEnd) {
				for(i = opacStart; i >= opacEnd; i--) {
					setTimeout("changeOpacin(" + i + ",'" + id + "')",(timer * speed));
					timer++;
					}
				} else if(opacStart < opacEnd) {
			for(i = opacStart; i <= opacEnd; i++) {
				setTimeout("changeOpacin(" + i + ",'" + id + "')",(timer * speed));
				timer++;
				}
			}
		}
 
		function changeOpacin(opacity, id) {
			var object = document.getElementById(id).style;
			object.opacity = (opacity * 100);
			object.MozOpacity = (opacity * 100);
			object.KhtmlOpacity = (opacity * 100);
			object.filter = "alpha(opacity=" + opacity + ")";
			}
 
		function opacityout(id, opacStart, opacEnd, millisec) {
 
			var speed = Math.round(millisec / 100);
			var timer = 0;
 
			if(opacStart > opacEnd) {
				for(i = opacStart; i >= opacEnd; i--) {
					setTimeout("changeOpacout(" + i + ",'" + id + "')",(timer * speed));
					timer++;
					}
				} else if(opacStart < opacEnd) {
			for(i = opacStart; i <= opacEnd; i++) {
				setTimeout("changeOpacout(" + i + ",'" + id + "')",(timer * speed));
				timer++;
				}
			}
		}
 
		function changeOpacout(opacity, id) {
			var object = document.getElementById(id).style;
			object.opacity = (opacity / 100);
			object.MozOpacity = (opacity / 100);
			object.KhtmlOpacity = (opacity / 100);
			object.filter = "alpha(opacity=" + opacity + ")";
			}
		</script>
	<head>
<body>
<div style="width:300px;height:30px;background-color:#e411a6;position:relative;" onmouseover="opacityin('color', 0, 100, 500);" onmouseout="opacityout('color', 100, 0, 500);">
<div id="color" style="width:300px;height:30px;background-color:black;position:relative;z-index:1;filter:alpha(opacity=0);-moz-opacity:0.0;opacity:0.0;-khtml-opacity:0.0;">
</div>
</div>
<div style="width:300px;height:30px;background-color:#e411a6;position:relative;" onmouseover="opacityin('color2', 0, 100, 500);" onmouseout="opacityout('color2', 100, 0, 500);">
<div id="color2" style="width:300px;height:30px;background-color:black;position:relative;z-index:1;filter:alpha(opacity=0);-moz-opacity:0.0;opacity:0.0;-khtml-opacity:0.0;">
</div>
</div>
<div style="width:300px;height:30px;background-color:#e411a6;position:relative;" onmouseover="opacityin('color3', 0, 100, 500);" onmouseout="opacityout('color3', 100, 0, 500);">
<div id="color3" style="width:300px;height:30px;background-color:black;position:relative;z-index:1;filter:alpha(opacity=0);-moz-opacity:0.0;opacity:0.0;-khtml-opacity:0.0;">
</div>
</div>
</body>
</html>
pour voir le r�sultat c'est ici

Merci � tous pour vos r�ponses.