28172 sujets

CSS et mise en forme, CSS3

Transorence d'un swf avec le css

Bonjour,
je cherche une solution à un problème que j'ai créer, voila j'ai une animation en flash que j'ai intégré dans un fichier html et je veux pas que l'arrière plan du swf soit visible sur le html qui a déjà un jolie fond, ça n'a pas marché avec 
<param name="wmode" value="transparent">

je vous donne le html 
<html>
<head>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>

	<body>
		
		<div id="resDetect"></div>
		
		<div id="flashContent">
    		<div id="flashMovie"><a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash"><img id="altImg" src="joyeux_noel.swf" width="800" height="600" alt="Download the Adobe Flash Player." /></a></div>
		</div>
		
		<script type="text/javascript">
			//<![CDATA[ 
				var flashvars = {};
				var attributes = {};
				var params = {};			
				params.align = "TL";
				params.menu = "false";
				params.wmode = "window";
				swfobject.embedSWF("joyeux_noel.swf", "flashMovie", "800", "600", "9.0.0", false, flashvars, params, attributes);
			//]]>
		</script>
		
	</body>
</html>


et le css
*{margin:0; padding:0; outline:0;}
html,body{width:100%; height:100%;}
body{
	background:url(bg.jpg) #0b3567 repeat top center;
	font-family:Arial,Helvetica,sans-serif;
	font-size:0.625em;
}
img{border:0px;}
#flashContent{
	margin:0 auto;	
	padding:28px 0px 0px 0px;
	width:1220px;
	height:738px;
	text-align:center;	
}
#flashMovie{
	float:none
	width:800px;
	height:600px;
	text-align: center;
}
#altImg{
	margin: 150px 0px 0px 0px;
	value:transparent;
}	
#resDetect{
	position:absolute;
	top:0; left:0;
	width:100%;
	height:100%;
	z-index:-1;
}




www.azzoune.com/ecard/joyeux_noel_2.html

merci à vous
Essaie avec


<object
type="application/x-shockwave-flash" data="joyeux_noel.swf"
width="800" height="600">
<param name="wmode" value="transparent" />
</object>


avant d'exporter ton flash --> publish setting --> onglet html --> windows mode --> transparant windowless --> publish

Essaie ca ... je ne te promets rien
Modifié par Wally (23 Dec 2008 - 15:55)
Hello,

Ça marche parfaitement avec le <param name="wmode" value="transparent" />. Le problème, c'est que tu n'utilises pas ce paramètre!

Le code HTML généré par le script SWFObject (avec les paramètres que tu lui passes en JS) est le suivant:
<object width="800" height="600" style="visibility: visible;" id="flashMovie" data="joyeux_noel.swf" type="application/x-shockwave-flash">
	<param value="TL" name="align"/>
	<param value="false" name="menu"/>
	<param value="window" name="wmode"/>
</object>

alors que tu devrais avoir:
<object width="800" height="600" style="visibility: visible;" id="flashMovie" data="joyeux_noel.swf" type="application/x-shockwave-flash">
	<param value="TL" name="align"/>
	<param value="false" name="menu"/>
	<param value="window" name="wmode"/>
	<param name="wmode" value="transparent">
</object>

Donc: direction la documentation de SWFObject pour savoir quels paramètres utiliser pour obtenir le bon code HTML généré. Ou bien laisser tomber SWFObject dans ce cas précis, où il est assez peu utile.

(Pour information, le code HTML généré une fois le code JS exécuté peut être observé, entre autres, avec Firebug ou avec la Web Developer Toolbar.)

foued a écrit :
je l'ai essayé mais ça marche pas

Ben tu as mal essayé alors.

En passant, un lien en anglais comme contenu alternatif de l'animation Flash, je suis pas sûr que ça soit pertinent. Un lien en français vers une page de téléchargement en français également, ça serait mieux. Un minimum de contenu texte en prime, ça serait encore mieux (accessibilité, référencement...).
Modifié par Florent V. (23 Dec 2008 - 16:21)
Sujet clos
Aller à