Menu déroulant Horizontal : je voudrais le superposer sur un swf

**PoichOU** · 06/09/2007, 09h45

Bonjour,

J'ai un menu horizontal déroulant et je voudrais qu'il passe au dessus d'un fichier swf.

Quelqu'un sait comment faire ?

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
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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head><title>Menu déroulant horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>
 
 
<style type="text/css">
<!-- 
 
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
 
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}
 
a {text-decoration: none;
color: black;
color: #222;
}
-->
</style></head><body>
 
<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
 
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
			<dd style="display: none;" id="smenu1">
				<ul>
					<li><a href="#">Sous-Menu 1.1</a></li>
					<li><a href="#">Sous-Menu 1.2</a></li>
					<li><a href="#">Sous-Menu 1.3</a></li>
					<li><a href="#">Sous-Menu 1.4</a></li>
					<li><a href="#">Sous-Menu 1.5</a></li>
					<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>
			</dd>
	</dl>
 
 
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
			<dd style="display: none;" id="smenu2">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>
					<li><a href="#">Sous-Menu 2.3</a></li>
					<li><a href="#">Sous-Menu 2.4</a></li>
				</ul>
			</dd>
	</dl>
 
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
			<dd style="display: none;" id="smenu3">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.2</a></li>
					<li><a href="#">Sous-Menu 3.3</a></li>
					<li><a href="#">Sous-Menu 3.4</a></li>
					<li><a href="#">Sous-Menu 3.5</a></li>
				</ul>
			</dd>
	</dl>
 
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
			<dd style="display: none;" id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.2</a></li>
					<li><a href="#">Sous-Menu 4.3</a></li>
				</ul>
			</dd>
	</dl>
</div>
<div id="site">
	<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" 
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" 
  width="468" height="60" 
  id="mymoviename"> 
    <param name="movie" value="http://www.tizag.com/pics/example.swf" /> 
    <param name="quality" value="high" /> 
    <param name="bgcolor" value="#ffffff" /> 
    <embed src="http://www.tizag.com/pics/example.swf" quality="high" bgcolor="#ffffff" width="468" height="60" name="mymoviename" align="" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> 
    </embed> 
</object> 
</div>
</body></html>

merci d'avance
PoichOU

**Bisûnûrs** · 06/09/2007, 09h56

http://developpez.net/forums/showpos...98&postcount=8

**PoichOU** · 06/09/2007, 13h36

yes merci de cette info.

Il fallait aussi changer la façon d'ajouter l'animation flash (voir ici).

Voici le code corrigé :

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
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"><head><title>Menu déroulant horizontal</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>
 
 
<style type="text/css">
<!-- 
 
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
 
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
width:80%;
height:80%;
}
 
a {text-decoration: none;
color: black;
color: #222;
}
-->
</style></head><body>
 
<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>
	</dl>
 
	<dl>			
		<dt onmouseover="javascript:montre('smenu1');">Menu 1</dt>
			<dd style="display: none;" id="smenu1">
				<ul>
					<li><a href="#">Sous-Menu 1.1</a></li>
					<li><a href="#">Sous-Menu 1.2</a></li>
					<li><a href="#">Sous-Menu 1.3</a></li>
					<li><a href="#">Sous-Menu 1.4</a></li>
					<li><a href="#">Sous-Menu 1.5</a></li>
					<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>
			</dd>
	</dl>
 
 
	<dl>	
		<dt onmouseover="javascript:montre('smenu2');">Menu 2</dt>
			<dd style="display: none;" id="smenu2">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>
					<li><a href="#">Sous-Menu 2.3</a></li>
					<li><a href="#">Sous-Menu 2.4</a></li>
				</ul>
			</dd>
	</dl>
 
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
			<dd style="display: none;" id="smenu3">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.2</a></li>
					<li><a href="#">Sous-Menu 3.3</a></li>
					<li><a href="#">Sous-Menu 3.4</a></li>
					<li><a href="#">Sous-Menu 3.5</a></li>
				</ul>
			</dd>
	</dl>
 
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>
			<dd style="display: none;" id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.2</a></li>
					<li><a href="#">Sous-Menu 4.3</a></li>
				</ul>
			</dd>
	</dl>
</div>
<div id="site">
<object type="application/x-shockwave-flash" data="http://www.tizag.com/pics/example.swf" width="100%" height="100%">
  <param name="movie" value="http://www.tizag.com/pics/example.swf" />
  <param name="wmode" value="opaque" /> 
  Texte alternatif
</object>
 
</div>
</body></html>

j'en profite pour te demander si tu sais comment faire pour ne pas avoir à cliquer sur le swf pour l'activer ?

PoichOU

**Bisûnûrs** · 06/09/2007, 13h53

Envoyé par PoichOU

j'en profite pour te demander si tu sais comment faire pour ne pas avoir à cliquer sur le swf pour l'activer ?

Utiliser Firefox ?

Sinon, y a une astuce pour IE mais je ne sais plus ce que c'est. Elle doit se trouver dans la cod msdn, seulement si tu utilises cette astuce, il me semble que le wmode="opaque" ne sera plus fonctionnel ...

**Bisûnûrs** · 06/09/2007, 14h11

Sinon regarde cette discussion, ça peut peut-être t'intéresser :

http://developpez.net/forums/showthread.php?t=353582

Cependant aucune solution n'a été trouvée ...

**PoichOU** · 06/09/2007, 15h22

merkiiiiiiiiii la réponse ici

PoichOU

**sanjb** · 09/01/2008, 16h41

Salut!
Après pas mal de galère, j'ai enfin trouvé comment avoir les 2:
- un menu déroulant qui s'affiche par dessus le .swf
- pas besoin de cliquer pour valider le .swf sur IE...

Il faut utiliser le code ci dessous pour ceux qui utilise la fichier .js de dreamwaver AC_RunActiveContent.js (en modifiant biensûr avec vos valeurs):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','450','height','250','src','feedback','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','bgcolor','#FFFFFF','movie','feedback', 'wmode', 'opaque' ); //end AC code
</script>
<noscript><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="450" height="250">
<param name="movie" value="feedback.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<embed src="feedback.swf" width="450" height="250" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" bgcolor="#FFFFFF"></embed>
</object>
</noscript>

Il suffisait de rejouter le parametre 'wmode', 'opaque' dans le liste des parametres du code .js (cf code ci-dessus)
exemple en fonctionnement: www.sanjb.net/mail (avec le menu déroulant qui est "dessus" le formulaire de contact en flash. J'ai le formulaire en flash comme ça pas de spam

)

J'espere que ça va servir à quelqu'un.

Sanjb

Menu déroulant Horizontal : je voudrais le superposer sur un swf

CSS

Discussions similaires

Partager

Partager