Discussion :

[pasc06]

Bonjour

Je débute et j'ai un petit souci :

J'ai créé un slideshow en JS, mais celui-ci cache mon sous-menu...



Voici le 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
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
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
/*
 * DEFILEMENT D'IMAGE AUTO OU MANUEL
 * ---------------------------------
 */
 
 
// Variable par defaut
var id_actif = 1;			// Pointeur de rotation
var zIndex 	 = 1;			// Positionnement de <li>
 
// Positionne l'objet avant de l'afficher
function position_slide(id) {
	var objet  = document.getElementById(id);
	var chaine = objet.id;
 
	// Masque l'objet  
	objet.style.opacity = 0;
    objet.style.filter  = "alpha(opacity=0)";	
 
	// Affiche en premier plan				
	objet.style.zIndex = zIndex++;					
 
	// Récupère l'id actif pour éviter un double affichage
	id_actif = num_id_actif(id);		
}
 
// Déclenche une animation avec un timer									
function opacity(id, opacStart, opacEnd, millisec){
	var speed = Math.round(millisec / 100);
	var timer = 0;
 
	if (opacStart > opacEnd) {
 
		for (i = opacStart; i >= opacEnd; i--) {
			setTimeout("change(" + i + ",'" + id + "')", (timer * speed));
			timer++;
		}
 
	}else{
 
		if (opacStart < opacEnd) {
 
			for (i = opacStart; i <= opacEnd; i++) {
				setTimeout("change(" + i + ",'" + id + "')", (timer * speed));
				timer++;
			}			
		}		
	}			
}
 
// Change l'opacité de l'image
function change(opacity, id) {
    var objet = document.getElementById(id).style;
 
    objet.opacity = (opacity / 100);
    objet.filter = "alpha(opacity=" + opacity + ")";					
}					
 
// Recupère le nombre total de <li> disponible
function nbr_total_li(id) {
	var ul 	= document.getElementById(id);
	var li	= ul.getElementsByTagName("li");				
 
	if (ul) return li.length;
}
 
// Récupère le n° de l'objet actif
function num_id_actif(id) {
	var objet  = document.getElementById(id);
	var chaine = objet.id;
 
	return parseInt(chaine.substr(enfant.length, 1));	
}
 
// Affiche l'objet demandé sous condition
function slideshow(id) {
	var objet = document.getElementById(id);
	if (objet) {		
		// Positionne l'objet de façon transparente
		position_slide(objet.id);
 
		// Déclenche l'animation					
		opacity(objet.id, 0, 100, transition);					
	}															
}
 
// Gérer l'affichage automatique dans l'ordre
function auto() {					
	if (id_actif == nbr_total_li(parent)) {
		id_actif = 1
 
	}else{
		id_actif++;	
	}
	slideshow(enfant + id_actif);	
}
 
// Déclenchement du défilement auto
function start(id, interval) {
	// Image par défaut
	slideshow(id);
 
	// Déclenche le défilement automatique
	setInterval("auto()", interval);	
}

Côté HTML :

Code :

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

1
2
3
4
5
6
7
8
<div id="pack_slide">			
<ul>
<li id="pack1"><img src="uploads/images/slide/diapo-1.jpg" alt="diapo-1" />
</li>			
<li id="pack2"><img src="uploads/images/slide/diapo-2.jpg" alt="diapo-2" />
</li>				
</ul>		
</div>

Et pour le 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
/*
 * MISE EN PAGE DU SLIDESHOW
 */
 
#pack_slide ul {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;				
}
 
#pack_slide li {
	position: absolute;
}	
 
#pack_slide li img {
	border: 0;
}

Comment résoudre ce problème ?

Merci de votre aide

[pasc06]

J'ai trouvé : Il fallait ajouter un "z-index: 10;" dans le sous-menu !