Swf en arriere plan (Z-index?)
Résolu
Peexstudio.fr
-
Peexstudio.fr -
Peexstudio.fr -
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>
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:
- Swf en arriere plan (Z-index?)
- Swf - Télécharger - Lecture
- Youtube en arrière plan - Guide
- Arrière plan - Guide
- Code ascii de a à z - Guide
- Arriere plan pc - Guide
5 réponses
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+
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+
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
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
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
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
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