Problème de flash qui passe au dessus d’un menu css

Vous avez un menu déroulant en CSS et une animation Flash en dessous, et quand vous déroulez votre menu, celui-ci passe sous l’animation… Pas de panique, voici une solution.

Dans le code html, admettons que vous avez un div#menu qui contient votre menu, et un div#animation qui contient quelque chose comme ça :


<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="800" height="600">
<param name="movie" value="images/diaporama.swf" />
<param name="quality" value="high" />
<embed src="animation.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="600"></embed>
</object>

Pour résoudre le problème, il suffit de :

  • Rajouter un paramètre <param name= »wmode » value= »transparent » /> dans l’object ;
  • Rajouter l’attribut  wmode= »transparent » dans la balise embed
  • Dans la feuille de style, mettre : z-index:100; sur le div#menu et z-index:-1; sur le div#animation

(Testé avec IE6, IE7, Firefox 3.5 et Safari 4)