RESOLU/Probleme Flash: Header en flash s'affiche par dessu le conten

Question

rod702

22 Oct 2008 à 00:23

Bonjour

Mon problème est que l'animation flash passe toujours en avant plan et de l'un ou de l'autre... N'étant pas un grand spécialiste des animations flashs, je ne comprend pas pourquoi l'object contenant l'animation passe toujours devant tout sans respecter le z-index...

J'ai tout essayé rien ne ce passe ! Smiley sweatdrop

car j'ai tout essayer swobject zindex peu etre de facon mal adroite !

voila j'ai un site en PHP et le header en flash se situe sur une autre page php
(car je fait appel a l'include)

voici la page contenant le flash


<script src="inc/js/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript" src="inc/js/swfobject.js"></script>
<div id="flash">

<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','763','height','227','src','img/flash_header','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','img/flash_header' ); //end AC code
</script>
<!--flash header-->
<noscript>
<object type="application/x-shockwave-flash" data="img/flash_header.swf" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="763" height="227" >
    <param name="movie" value="img/flash_header.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque">
</object>
</noscript>
<!--flash header fin-->
</div>

et voici la page php qui recoi le header flash


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>rod702 - Portfolio -</title> 
<!-- Javascript contenant le HIGHSLIDE BOX -->
<script language="JavaScript" src="inc/js/highslide-full.js" type="text/javascript"></script>
<script type="text/javascript"> hs.graphicsDir = 'img/graphics/';</script>

<link href="inc/css/style.css" rel="stylesheet" type="text/css" />
<link href="inc/css/hs.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="global">
  <div class="cellule_header" id="header"><?php include('header.php'); ?></div>
  
  <div id="body_portfolio">
<!--naviguation interne-->  
 <div id="sub_menu">
   <div id="links" style="margin-bottom:5px"><a href="#" class="links">» WEBDESIGN </a>&nbsp;&nbsp; <a href="#" class="links">» LOGO </a>&nbsp;&nbsp;<a href="#" class="links">» DIVERS</a> </div>
 </div>
<!--fin naviguation interne-->  


<!--BLOCK PHOTOS--> 
<div id="block_photo" style="margin-left:19px; margin-right:19px; margin-top:0px">
  <!-- 1er rang-->
  <div class="cellule-photo" style="margin-right:12px; margin-top:27px">
  <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a> <div class="highslide-caption">olaaaaaaaaa</div> </div>



  <div class="cellule-photo" style="margin-right:12px; margin-top:27px">
   <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a> <div class="highslide-caption">olaaaaaaaaa</div>  </div>
 
 
 
 
  <div class="cellule-photo" style="margin-right:12px; margin-top:27px">
   <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a> <div class="highslide-caption">olaaaaaaaaa</div>   </div>
  
  
  
  
  <div class="cellule-photo" style="margin-right:12px; margin-top:27px">
   <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a><div class="highslide-caption">olaaaaaaaaa</div>  </div>




  <div class="cellule-photo" style="margin-top:27px">
  <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a> <div class="highslide-caption">olaaaaaaaaa</div>   </div>
  <!-- fin 1er rang-->
  
  

  <!-- 2eme rang-->
  <div class="cellule-photo" style="margin-top:10px; margin-right:12px">
   <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a> <div class="highslide-caption">olaaaaaaaaa</div>   </div>
  
  
  
  <div class="cellule-photo" style="margin-top:10px; margin-right:12px">
   <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a> <div class="highslide-caption">olaaaaaaaaa</div>  </div>
 
 
 
 
  <div class="cellule-photo" style="margin-top:10px; margin-right:12px">
   <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a> <div class="highslide-caption">olaaaaaaaaa</div>   </div>
  
  


  <div class="cellule-photo" style="margin-top:10px; margin-right:12px">
   <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a> <div class="highslide-caption">olaaaaaaaaa</div>   </div>
  
  
  
  
  <div class="cellule-photo" style="margin-top:10px"> <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a> <div class="highslide-caption">olaaaaaaaaa</div>  </div>
  <!-- Fin 2eme rang-->
  
  
  
  <!-- 3eme rang-->
  <div class="cellule-photo" style="margin-top:10px; margin-right:12px">
   <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a> <div class="highslide-caption">olaaaaaaaaa</div>   </div>
  
  
 
  <div class="cellule-photo" style="margin-top:10px; margin-right:12px">
   <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a> <div class="highslide-caption">olaaaaaaaaa</div>   </div>
  
  
  
  <div class="cellule-photo" style="margin-top:10px; margin-right:12px">
   <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a> <div class="highslide-caption">olaaaaaaaaa</div>   </div>
  
  
  
  <div class="cellule-photo" style="margin-top:10px; margin-right:12px">
   <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a> <div class="highslide-caption">olaaaaaaaaa</div>   </div>
  
  
  
  <div class="cellule-photo" style="margin-top:10px">
   <a href="img/template_web/big/test.jpg" class="highslide" onclick="return hs.expand(this, {captionId: 'caption1'})"><img src="img/template_web/thumbs/thumbs.jpg" alt="chargement" width="135" height="129" title="Cliquez pour agrandir"/></a> <div class="highslide-caption">olaaaaaaaaa</div>   </div>
  <!-- Fin 3eme rang-->
</div>
<!--BLOCK PHOTOS--> 
  </div>
</div>
<!-- FOOTER -->  
<div id="footer">
    <div align="center" class="footer_position"><?php include('footer.php'); ?></div>
</div>
<!-- FIN FOOTER --> 
</body>
</html>

Help
Modifié par rod702 (22 Oct 2008 - 23:08)

fvsch

22 Oct 2008 à 11:18

Bonjour,

Pour l'animation Flash: il faut à priori utiliser le paramètre wmode avec la valeur "transparent".

Pour le z-index: il n'est actif que pour les éléments positionnés. Voir la FAQ du forum à ce sujet.

rod702

22 Oct 2008 à 14:17

Florent V. a écrit :
Bonjour,

Pour l'animation Flash: il faut à priori utiliser le paramètre wmode avec la valeur "transparent".

Pour le z-index: il n'est actif que pour les éléments positionnés. Voir la FAQ du forum à ce sujet.

salut !

merci de ta reponse, j'ai deja utilisé cela mais ca ne change rien car quand je clique sur le thumbs(image miniature) limage apparait sous le flash quand meme Smiley bawling

fvsch

22 Oct 2008 à 15:38

rod702 a écrit :
merci de ta reponse, j'ai deja utilisé cela mais ca ne change rien car quand je clique sur le thumbs(image miniature) limage apparait sous le flash quand meme

Avec quel(s) navigateur(s), quel(s) système(s) d'exploitation, et quelle(s) version(s) du player Flash?
Avec Flash 8-9 sous Linux c'est plus ou moins inévitable (sauf à bidouiller beaucoup), par exemple.
Modifié par Florent V. (22 Oct 2008 - 15:39)

AspiGeek

22 Oct 2008 à 15:57

a écrit :
<script src="inc/js/AC_RunActiveContent.js" type="text/javascript"></script>

<script type="text/javascript" src="inc/js/swfobject.js"></script>

Hello Rod702,

Je suis une quiche en php mais je peux t'aider en flash et de ce fait je ne comprends pas pourquoi tu utilises ces 2 javascripts.
Perso je garderai la méthode du SWFObject en gardant ton deuxième fichier javascript.

Par contre, ta balise object est fausse avec cette méthode, ça doit être sous cette forme.


<div id="flash">
<div id="nomID">Ton texte alternatif qui sera remplacé par ton swf</div>
<script type="text/javascript">
var swf1= new SWFObject("img/flash_header.swf","swf",763,227,9,""); 
swf1.addParam("wmode","transparent");
swf1.addParam("quality","best");
swf1.write("nomID");
</script>
</div>

Je ne dis pas que ça va résoudre ton problème mais le mieux est de mettre le lien de ta page Smiley biggrin

@+
Modifié par copperfield (22 Oct 2008 - 15:59)

rod702

22 Oct 2008 à 20:49

copperfield a écrit :
<script src="inc/js/AC_RunActiveContent.js" type="text/javascript"></script>

<script type="text/javascript" src="inc/js/swfobject.js"></script>

Hello Rod702,

Je suis une quiche en php mais je peux t'aider en flash et de ce fait je ne comprends pas pourquoi tu utilises ces 2 javascripts.
Perso je garderai la méthode du SWFObject en gardant ton deuxième fichier javascript.

Par contre, ta balise object est fausse avec cette méthode, ça doit être sous cette forme.


<div id="flash">
<div id="nomID">Ton texte alternatif qui sera remplacé par ton swf</div>
<script type="text/javascript">
var swf1= new SWFObject("img/flash_header.swf","swf",763,227,9,""); 
swf1.addParam("wmode","transparent");
swf1.addParam("quality","best");
swf1.write("nomID");
</script>
</div>

Je ne dis pas que ça va résoudre ton problème mais le mieux est de mettre le lien de ta page Smiley biggrin

@+

salut man ! merci je vais faire le test !
Pour l insctant c pas en ligne !

je vous tien au courrant

rod702

22 Oct 2008 à 22:23

salut !

bah moi j'ai pas reussi et ,'ai testé ca qui marche sous IE 7 mais pas sur FF 3


<div id="divFlash">
<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="763" height="227">
<param name="movie" value="img/flash_header.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">


<embed src="img/flash_header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="763" height="227"></embed></object>
</div>


<script language="javascript" type="text/javascript">
swfobject.embedSWF("img/flash_header.swf", "divFlash", "763", "227", "6,0,29,0");
</script>

Modifié par rod702 (22 Oct 2008 - 22:24)

rod702

22 Oct 2008 à 22:26

copperfield a écrit :
<script src="inc/js/AC_RunActiveContent.js" type="text/javascript"></script>

<script type="text/javascript" src="inc/js/swfobject.js"></script>

Hello Rod702,

Je suis une quiche en php mais je peux t'aider en flash et de ce fait je ne comprends pas pourquoi tu utilises ces 2 javascripts.
Perso je garderai la méthode du SWFObject en gardant ton deuxième fichier javascript.

Par contre, ta balise object est fausse avec cette méthode, ça doit être sous cette forme.


<div id="flash">
<div id="nomID">Ton texte alternatif qui sera remplacé par ton swf</div>
<script type="text/javascript">
var swf1= new SWFObject("img/flash_header.swf","swf",763,227,9,""); 
swf1.addParam("wmode","transparent");
swf1.addParam("quality","best");
swf1.write("nomID");
</script>
</div>

Je ne dis pas que ça va résoudre ton problème mais le mieux est de mettre le lien de ta page Smiley biggrin

@+

yep moi jai fait ca mais ca marche que sur IE 7


<div id="divFlash">
<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="763" height="227">
<param name="movie" value="img/flash_header.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">


<embed src="img/flash_header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="763" height="227"></embed></object>
</div>


<script language="javascript" type="text/javascript">
swfobject.embedSWF("img/flash_header.swf", "divFlash", "763", "227", "6,0,29,0");
</script>

rod702

22 Oct 2008 à 23:07

Yep probelem resolu voila le code


<div id="divFlash">
<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="763" height="227">
<param name="movie" value="img/flash_header.swf"/>
<param name="quality" value="high"/>
<param name="wmode" value="transparent"/>
<embed src="img/flash_header.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="763" height="227" wmode="transparent" />
</embed>
</object>
</div>

ce code dans object fait marcher parfaitement le flash sous IE 7


<param name="wmode" value="transparent"/>

et celui la dans embed marche sous ff 3


wmode="transparent"

AspiGeek

22 Oct 2008 à 23:27

Sauf que la balise "embed" n'est pas valide W3C Smiley cligne

rod702

23 Oct 2008 à 00:04

copperfield a écrit :
Sauf que la balise "embed" n'est pas valide W3C

oui je c! mais que dois je mettre alors ? et comment le mettre?

fvsch

23 Oct 2008 à 00:09

Voir la FAQ du forum pour un code d'insertion d'animation Flash valide. Tu aurais pu commencer par ça. Smiley cligne

AspiGeek

23 Oct 2008 à 00:19

Ca par exemple

<object type="application/x-shockwave-flash" data="tonswf.swf" width="110" height="73">
<param name="movie" value="tonswf.swf" />
<param name="wmode" value="transparent" />
<p> Texte alternatif </p>
</object>

Par contre la méthode du SWFObject que je t'ai donné avant est de loin la meilleure mais pour un header le précédent code devrait largement suffire. Smiley cligne

@+
Modifié par copperfield (23 Oct 2008 - 00:19)

rod702

23 Oct 2008 à 16:45

copperfield a écrit :
Ca par exemple
<object type="application/x-shockwave-flash" data="tonswf.swf" width="110" height="73">
<param name="movie" value="tonswf.swf" />
<param name="wmode" value="transparent" />
<p> Texte alternatif </p>
</object>
Par contre la méthode du SWFObject que je t'ai donné avant est de loin la meilleure mais pour un header le précédent code devrait largement suffire.

@+

Yep

Ca marche sur firefox mais pas ie ? le flash n'apparait pas ?

rod702

23 Oct 2008 à 16:52

copperfield a écrit :
Ca par exemple
<object type="application/x-shockwave-flash" data="tonswf.swf" width="110" height="73">
<param name="movie" value="tonswf.swf" />
<param name="wmode" value="transparent" />
<p> Texte alternatif </p>
</object>
Par contre la méthode du SWFObject que je t'ai donné avant est de loin la meilleure mais pour un header le précédent code devrait largement suffire.
Merci coperfiel ca fonctionne ton code est valide w3c !!!!!

@+


<div id="divFlash">
<object type="application/x-shockwave-flash" data="img/flash_header.swf" width="763" height="227">
<param name="movie" value="img/flash_header.swf" />
<param name="wmode" value="transparent" />
<p> Texte alternatif </p>
</object>
</div>

Sujet clos

Questions générales et questions de débutants

RESOLU/Probleme Flash: Header en flash s'affiche par dessu le conten