Bonjour à tous,

Je souhaiterais faire défiler des images dans une div lors du passage de la souris dessus, hélas je rencontre quelques difficultés à cela ...

Voici un extrait de mon code html :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
<div id="containers">
	<img id="img1" class="img" src="./templates/images/1.png" />
	<img id="img2" class="img" src="./templates/images/2.png" />
	<img id="img3" class="img" src="./templates/images/3.png" />
	<img id="img4" class="img" src="./templates/images/4.png" />
	<img id="img5" class="img" src="./templates/images/5.png" />
			</div>
Et le javascript qui suit :
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
<script type="text/javascript">
	$(document).ready(function() {
		var drap = true;
 
		var show1 = function() { $("#img1").css("display", "block"); }
		var unshow1 = function() { $("#img1").css("display", "none"); }
 
		var show2 = function() { $("#img2").css("display", "block"); }
		var unshow2 = function() { $("#img2").css("display", "none"); }
 
		var show3 = function() { $("#img3").css("display", "block"); }
		var unshow3 = function() { $("#img3").css("display", "none"); }
 
		var show4 = function() { $("#img4").css("display", "block"); }
		var unshow4 = function() { $("#img4").css("display", "none"); }
 
		var show5 = function() { $("#img5").css("display", "block"); }
		var unshow5 = function() { $("#img5").css("display", "none"); }
		var i=0;
		var showAll = function() { 
		for (i=0; i>50000 ; i=i+5000)
		{
			if (drap==true){
					setTimeout(unshow1, i);
					setTimeout(show2, i);
					setTimeout(unshow2, i+1000);
					}
			if (drap==true){		
					setTimeout(show3, i+1000);
					setTimeout(unshow3, i+2000);
					}
			if (drap==true){		
					setTimeout(show4, i+2000);
					setTimeout(unshow4, i+3000);
					}
			if (drap==true){		
					setTimeout(show5, i+3000);
					setTimeout(unshow5, i+4000);
					}
			if (drap==true){		
					setTimeout(show1, i+4000);
					setTimeout(unshow1, i+5000);
					}
		}
 
		}
 
		$("#img1").css("display", "block");
		$("#containers").hover(function() {
			drap=true;
			setTimeout(showAll, 0);
		});
		$("#containers").mouseout(function() {drap=false;});
	});
</script>
Voila 3jours que je planche dessus je suis un peu à court d'idées ...

Cordialement.