Swf en arriere plan (Z-index?)

Résolu/Fermé
Peexstudio.fr - 7 nov. 2009 à 15:23
 Peexstudio.fr - 17 nov. 2009 à 12:38
Bonjour,

Je souhaite mettre une animation flash dans le coin inférieur droit de l'écran.
Le petit plus c'est que celle-ci s'animerait directement derrière le contenu du site (textes, u1...).

J'ai presque réussi a avoir se que je voulais: https://imageshack.com/

Sur le screen l'animation est placé là où je le souhaite mais n'est pas derriere le contenue (se que je voudrais) j'ai pourtant mis les balises "z'index" mais quelques chose m'échappe...

Voici le code de ma page:

#en_tete
{
width:100%;
height:351px;
background-image:url(http://peexstudio.fr/aa.jpg);
background-repeat:repeat-x;
padding-top:94px;
}
h1
{
color: #49a2fc;
}

p
{
font-family: Arial, Verdana, serif;
font-size: x-small;
color: white;
width: 60%;
z-index:2;
}

body
{
background-color: black;
width:100%;
height:100%
}

#skyline {
width: 893px;
height: 79px;
background: url(http://peexstudio.fr/barre_menu.png);
padding: 0;
position: relative;
border: none
}
#skyline li {border: none; padding: 0; list-style: none; position: absolute; top: 0;}

#skyline li, #skyline a {border: none; height: 79px; display: block; }
#panel1b {border: none; left: 0; width: 131px;}
#panel2b {border: none; left: 131px; width: 201px;}
#panel3b {border: none; left: 332px; width: 145px;}
#panel4b {border: none; left: 477px; width: 195px;}
#panel5b {border: none; left: 674px; width: 220px;}

#panel1b a:hover {
background: transparent url(http://peexstudio.fr/barre_menu_hover.png) 0 0px no-repeat;
border: none
}
#panel2b a:hover {
background: transparent url(http://peexstudio.fr/barre_menu_hover.png) -131px 0px no-repeat;
border: none
}
#panel3b a:hover {
background: transparent url(http://peexstudio.fr/barre_menu_hover.png) -332px 0px no-repeat;
border: none
}
#panel4b a:hover {
background: transparent url(http://peexstudio.fr/barre_menu_hover.png) -477px 0px no-repeat;
border: none
}
#panel5b a:hover {
background: transparent url(http://peexstudio.fr/barre_menu_hover.png) -674px 0px no-repeat;
border: none
}

#copyright{
margin: auto;
width: 823px;
height: 82px;
font-family: Arial, Verdana, serif;
font-size: x-small;
color: white;
background-image: url(http://peexstudio.fr/cadrecopyright.png);
line-height: 65px;
z-index:3;
}

#flash
{
position:absolute;
bottom: -205px;
z-index:1;
}

Voici la partie du code html qui va avec l'animation flash:

<div id="flash"><embed src="VideoPeexstudio.swf" quality="high" pluginspage="https://get.adobe.com/flashplayer/" type="application/x-shockwave-flash" width="768" height="576"></embed></div>
A voir également:

5 réponses

Peexstudio.fr
17 nov. 2009 à 12:38
Hello Lepenou,

Oui j'ai réussi mais j'ai préféré le .flv au .swf, (meilleur qualité pour un poids deux fois moins lourd)

Regarde: http://peexstudio.fr/fr/accueil.html

Voici le code que j'ai inséré:

<div class="c1">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1000" height="500" id="Flashouille">
<param name="movie" value="player.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />

<param name="flashvars" value="controlbar=none&file=planisphere1.flv&autostart=true&repeat=always" />

<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="player.swf" width="1000" height="500">
<param name="flashvars" value="controlbar=none&file=planisphere1.flv&autostart=true&repeat=always" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<!--<![endif]-->
<a href="https://get.adobe.com/flashplayer/"><img src=
"https://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt=
"Get Adobe Flash player" /></a> <!--[if !IE]>-->

</object> <!--<![endif]-->

</object>
</div>


Aide: Remplace "planisphere1.flv" par le nom de ta video ainsi que les valeurs width="1000" et height="500" par les valeurs Largeur, Hauteur de ta vidéo et ce sur les deux endroits différents (l'une concerne IE exclusivement).

En ce qui concerne ma class associé: <div class="c1">
J'ai mis ceci dans mon code html:

<style type="text/css">
/*<![CDATA[*/
div.c1 {position: absolute; bottom: 0px; left: 0pt; z-index: -1;}
/*]]>*/
</style>

Naturellement change mes valeurs par les tiennes, mais garde le z-index -1 pour que ta vidéo soit en background.

Voila a+
2
Peexstudio.fr
7 nov. 2009 à 15:32
Dsl je me suis trompé de lien, voici le screenshoot: https://imageshack.com/
0
Peexstudio.fr
7 nov. 2009 à 20:43
Personne ne peut m'aider?
0
Salut!
As tu réussi a mettre du flash en background?
Je cherche a faire la meme chose...Si tu as trouvé la solution, peux tu m'en faire profiter?
Merci
Aplus
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
superblitzcaro Messages postés 10 Date d'inscription mardi 20 octobre 2009 Statut Membre Dernière intervention 27 janvier 2010 1
16 nov. 2009 à 21:26
hello,

il y a un temps j'avais cela sur mon site:
une anim swf en fond, puis une DIV par dessus avec des liens

voilá le code

<body >
<div id="general">
<object id="parametredetonanim" data="tonanim.swf" type="application/x-shockwave-flash">

<param name="movie" value="tonanim.swf" />
<param name="wmode" value="transparent" />
</object>

<div id="contenu" >
ta div qui se trouve par dessus ton anim' tu y mets ce que tu veux!
</div>
</div
</body>

dans tes css, le DIV "general" doit avoir un z-index inférieur à la DIV "contenu"
voilà, j'espère que ça peut t'aider
0