28172 sujets

CSS et mise en forme, CSS3

Upperposition de div avec contenu flash

Bonjour,
j'essai de supperposer 2 div dont chacune contien une animation flash.

pour la div1 j'ai mis un z-index:1 et la div2 z-index:2

le probleme et que une fois sur x la div 1 et au dessus de la div 2 et inverssement et je galèèèèèèère.

voici comment je fait :


<div id="diaporama" style="z-index:2">
<object data="../animations/diaporama.swf" type="application/x-shockwave-flash" width="800" height="70" align="middle">
<param name="movie" value="../animations/diaporama.swf" />
</object>
</div>


<div id="similipopup" style="z-index:1">
<object data="animations/pub-mag.swf" type="application/x-shockwave-flash" width="550" height="400" align="middle">
<param name="movie" value="animations/pub-mag.swf" />
</object><br/>
<a href="#" onclick="document.getElementById('similipopup').style.display = 'none'"><img src="images/fermer.png" />
</a>              
</div>


auriez vous une idée pour résoudre le probleme ?

Merci pour votre aide.
Modifié par fabrice88 (02 Feb 2010 - 10:56)
Bonjour,

J'aimerais savoir pourquoi tu voudrais superposer deux flash distincts ? Tu pourrais très bien faire ce travail dans ton animation flash, superposer deux movieclips et faire la "programmation" là-dedans ?

Mais bon, pour répondre à ta question initiale, je crois qu'en premier lieu, tu dois mettre ton flash en mode transparent ( wmode ). Ajoute une couleur à ton arrière-plan dans ton animation au besoin. Voici un exemple de code.

<body>
<div id="container">
    <div id="diaporama"> 
        <object data="small_header.swf" type="application/x-shockwave-flash" width="800" height="350"> 
        <param name="movie" value="small_header.swf" /> 
        <param name="wmode" value="transparent">
        </object> 
    </div> 
    <div id="similipopup"> 
        <object data="headerin.swf" type="application/x-shockwave-flash" width="550" height="400"> 
        <param name="movie" value="headerin.swf" /> 
        <param name="wmode" value="transparent">
        </object>            
    </div>  
</div>
</body>




	#container { position:relative; }
	#similipopup { position:absolute; top:0; left:0; z-index:2; }
	#diaporama { position:absolute; top:0; left:0; z-index:15; }


Ça semblait bien marché partout ( Firefox 3.6, IE 6-7-8, Chrome 4 et Opera 10 )

En espérant que ça réponde à ta question.
Sujet clos
Aller à