18041 sujets

Questions générales et questions de débutants

[Résolu] Menu déroulant H : je voudrais le superposer sur un swf

Bonjour,

je voudrais que mon menu déroulant passe au dessus d'un fichier swf.

J'ai donc repris l'exemple et j'ai mis mon .swf en dessous mais ça ne marche pas. Quelqu'un sait comment faire ?

voici mon code :
<!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">
<!-- 
/* CSS issu des tutoriels  http://css.alsacreations.com  */
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
Modifié par PoichOU (07 Sep 2007 - 09:29)
Salut, je n'ai pas pris le temps de lire ta source mais ayant déjà été confronté à ce probleme, la solution est de rendre l'arrière-plan de ton flash transparent (<PARAM>). Je sais, ce n'est pas très logique mais renseignes toi à ce sujet, il y a juste un paramètre à ajouter à ton 'object'.

Have fun.
Salut,

il me semble que les éléments en flash sont disposés sur une "couche" supérieure à toute la partie HTML de la page, et que de ce fait il n'est pas possible de positionner des éléments au-dessus d'un objet Flash ...

Mais je me trompe peut-être Smiley cligne
Si c'est possible Smiley langue Kadheus a raison, j'ai cherché du coté du param transparent et j'ai trouvé ça

voici le code qui marche :
<!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">
<!-- 
/* CSS issu des tutoriels  http://css.alsacreations.com  */
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>


merkiiiiiiii

PoichOU
Bonsoir à tous, désolé de réouvrir ce sujet mais ma contribution le poursuit logiquement,

J'avais à peu près le même problème que toi, et je l'ai réglé comme toi.
Le problème, c'est qu'avec cette méthode, on est obligé de cliquer sur le lien du menu 2 fois sous IE au lieu d'une fois sous FF, car sous IE on est obligé d'activer les animations flash (l'espèce de cadre gris autour du swf).

Je cherchais à savoir comment m'en débarasser, j'ai donc trouvé quelque chose sur le SWFObject.

Le problème c'est qu'avec cette méthode, le swf passe systématiquement au premier plan.

Quelqu'un a-t-il donc trouvé le moyen d'avoir le menu déroulant CSS au premier plan sous IE sans avoir besoin de cliquer 2 fois ?

Merci à tous.
Merci Poichou, grâce à tes recherches, j'ai gagné un temps précieux. Maintenant mes menus déroulants se superposent à mes animations flash contenues dans mes articles joomla. Smiley sweatdrop
Modifié par chrisSs (13 Jun 2008 - 14:26)
Sujet clos
Aller à