Comment intégrer un swf au dessus d'une page html?

StackOverflow https://stackoverflow.com/questions/300200

  •  08-07-2019
  •  | 
  •  

Question

Je souhaite intégrer un fichier swf sur une page HTML, comme un panneau de surveillance vidéo flottant. J'ai déjà un fichier swf qui ajustera automatiquement sa taille en fonction de la taille du navigateur, et le fichier swf est partiellement transparent. Je pensais pouvoir ajouter une balise div, rendre la position absolue et modifier l'indice z plus grand, mais cela ne fonctionne pas, car le swf vient de remplacer tout ce qui se trouve sur la page.

Voici ce que j'ai fait 

<script>
      swfobject.embedSWF("swf/float.swf", "header", "100%", "100%", "9.0.0");
</script>

<body bgcolor="#000000">
      <div id="header"></div>
      <div id="shell">
          things in my html
      </div>
</body>

#header {
    position:absolute;
    z-index:100;

}

Une idée? Merci.

Était-ce utile?

La solution

Une fois que vous avez correctement dimensionné votre dimensionnement, vous devez définir le wmode sur transparent pour pouvoir voir ce qu'il y a derrière le flash. le fond sera opaque.

Ceci est un copypaste rapide de la documentation swfobject , mais il devrait être le point sur: 

<script type="text/javascript">

var flashvars = {};
var params = {wmode : "transparent"};
var attributes = {};

swfobject.embedSWF("myContent.swf", "myContent", "300", "120", "9.0.0","expressInstall.swf", flashvars, params, attributes);

</script>

Autres conseils

Je pense que le problème avec ceci est que le CSS ne fonctionne pas bien avec les balises <object />. Le swfobject.embedSWF transforme la <div id="header"></div> en une balise <=> avec un groupe d'attributs pouvant affecter le CSS. Si vous créez une DIV wrapper autour de l'en-tête DIV et appliquez le CSS à la DIV wrapper, tout fonctionne mieux. Vous devez également ajouter 100% largeur et hauteur dans le CSS. Voici la source révisée: 

<script>
    swfobject.embedSWF("swf/float.swf", "header", "100%", "100%", "9.0.0");
</script>

<body bgcolor="#000000">
    <div id="wrapper">
        <div id="header"></div>
        </div>
    <div id="shell">
        things in my html
    </div>
</body>

#wrapper {
    position:absolute;
    z-index:100;
    width:100%;
    height:100%;
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top