Comment mettre un flash en arrière plan ?

Comment mettre un flash en arrière plan ? - Web design - Graphisme

Marsh Posté le 09-01-2007 à 16:43:16    

En fait, j'ai une animation flash (réalisée en faire avec swich) qui s'affiche sur une page. Jusque là, no problemo.
Ensuite, j'ai une image gif, complètement indépendante qui s'affiche de temps en autre en fonction de certains critères. Idem avec parfois des petites question avec un div en position absolue.
 
Mon problème est que l'animation flash passe toujours en avant plan et quelque soit les valeurs z-index de l'un ou de l'autre... N'étant pas un grand spécialiste des animations flashs (car je ne suis pas graphiste), je ne comprend pas pourquoi l'object contenant l'animation passe toujours devant tout sans respecter le z-index...
 
Voici un exemple de source :

Code :
  1. <img src='mon_image.gif' border=0 style='position:absolute;top:2px;left:0px;z-index:0'>
  2. <object style='position:absolute;top:15px;left:5px;z-index:1'
  3.   classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000'
  4.   codebase='http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,42,0'
  5.   id=A123456 width=500 height=80>
  6.   <param name=movie value='mon_anim.swf'><param name=quality value=high>
  7.   <embed name='A123456' src='mon_anim.swf' quality=high width=500 height=80
  8.   type='application/x-shockwave-flash'
  9.   pluginspage='http://www.macromedia.com/go/getflashplayer'></embed>
  10. </object>


 
Bref, comment faire pour que l'image gif soit affiché DEVANT l'animation flash ?
(idem pour un div contenant un formulaire par exemple)
 
Merci d'avance à ceux qui m'aiderons et bonne année à tous !


Message édité par briceboursica le 09-01-2007 à 16:50:12

---------------
Brice de www.boursica.com
Reply

Marsh Posté le 09-01-2007 à 16:43:16   

Reply

Marsh Posté le 09-01-2007 à 17:10:02    

Ajoute cette ligne dans ton <object>
 
 

Code :
  1. <param name="wmode" value="transparent">



---------------
Rien est impossible, il suffit d'y croire !
Reply

Marsh Posté le 09-01-2007 à 17:10:08    

Là déjà ton flash à un z-index supérieur au gif, donc c'est normal qu'il s'affiche devant :

Code :
  1. <img .... z-index: 10" />
  2. <object .... z-index: 1">

Message cité 1 fois
Reply

Marsh Posté le 09-01-2007 à 17:12:06    

FlorentG a écrit :

Là déjà ton flash à un z-index supérieur au gif, donc c'est normal qu'il s'affiche devant :

Code :
  1. <img .... z-index: 10" />
  2. <object .... z-index: 1">



 
Avec ma ligne peu importe l'index du div ou de l'image...

Message cité 1 fois

---------------
Rien est impossible, il suffit d'y croire !
Reply

Marsh Posté le 09-01-2007 à 17:17:31    

Royal !  :bounce:  
 
le <param name="wmode" value="transparent"> est en fait la chose qui rend l'animation "normale" et lui fait respecter les plans...  
 
quand au z-index, oui, merci aussi FlorentG, j'en avais essayé de toutes sortes, sans succès car je ne connaissait pas le param Pyksel que je remerci aussi ! D'ailleurs, même si je retire tous les z-index, à présent ça fonctionne....
Comme quoi on peu passer un temps fou à chercher un truc tout bête...
 
Merci encore.

Message cité 1 fois

---------------
Brice de www.boursica.com
Reply

Marsh Posté le 09-01-2007 à 17:19:32    

briceboursica a écrit :

Royal !  :bounce:  
 
le <param name="wmode" value="transparent"> est en fait la chose qui rend l'animation "normale" et lui fait respecter les plans...  
 
quand au z-index, oui, merci aussi FlorentG, j'en avais essayé de toutes sortes, sans succès car je ne connaissait pas le param Pyksel que je remerci aussi ! D'ailleurs, même si je retire tous les z-index, à présent ça fonctionne....
Comme quoi on peu passer un temps fou à chercher un truc tout bête...
 
Merci encore.


 
Que du bonheur un foromeur heureux... Moi je pense que craps_youpla peut nous faire un exposé plus approfondi du bordel des param... :) Contacte le de ma part mais fait gaffe il mord parfois ;)


---------------
Rien est impossible, il suffit d'y croire !
Reply

Marsh Posté le 09-01-2007 à 17:25:17    

Code :
  1. <param name="wmode" value="opaque">


 
Marche trés bien aussi... CF la doc...


---------------
Rien est impossible, il suffit d'y croire !
Reply

Marsh Posté le 09-01-2007 à 17:43:03    

Pyksel a écrit :

Avec ma ligne peu importe l'index du div ou de l'image...


Ah :/ Pas cool si on veut intervertir les deux suivant le cas. Enfin maintenant là on s'en fout vu qu'il ne doit gérer que les images au-dessus du flash.
 
Marrant en tous cas qu'il faille passer par ça, les positions absolues et les z-index devant normalement faire l'affaire, selon la recommendation CSS. Encore Flash qui fout la merde :o

Reply

Marsh Posté le 09-01-2007 à 17:53:27    

merci à tous, oui très heureux d'avoir résolu ce petit blème et avec opaque c'est encore mieux car il respecte le fond de l'animation.
et je suis d'accord sur le fait que normalement le css devrait être respecté...


---------------
Brice de www.boursica.com
Reply

Marsh Posté le 09-01-2007 à 18:55:04    

Ok, en fait le paramètre wmode rend le flash "windowless", du coup il peut être mis en-dessous d'autres éléments.
 
C'est le même problème qu'avec <select> sous IE6, impossible de le mettre en-dessous de quelque chose. IE7 a corrigé la chose heureusement.

Message cité 1 fois
Reply

Marsh Posté le 09-01-2007 à 18:55:04   

Reply

Marsh Posté le 09-01-2007 à 20:05:44    

[:hahaguy] tu ne le savais meme pas [:hahaguy]

Reply

Marsh Posté le 09-01-2007 à 20:08:39    

J'avais oublié [:hahaguy]

Reply

Marsh Posté le 09-01-2007 à 20:49:33    

FlorentG a écrit :

Ok, en fait le paramètre wmode rend le flash "windowless", du coup il peut être mis en-dessous d'autres éléments.


Good Job
 

FlorentG a écrit :


C'est le même problème qu'avec <select> sous IE6, impossible de le mettre en-dessous de quelque chose.


Ou en faisant passer une iframe dessous.
Tiens j'ai developpé cet objet qui génère une iframe seulement pour IE (pour IE7 faudra juste sortir une règle en plus)
 

Code :
  1. /* genere une iframe pour faire passer les divs par dessus des selects sous IE */
  2. var ifrlayer = {
  3. make:function(obj) {
  4.     if(!obj) return; obj = (typeof(obj)=="string" ) ? document.getElementById(obj) : obj; if(!obj) return;
  5.  if(document.all && window.print && !window.opera && document.getElementById && !obj.iframelayer ) {
  6.   if(obj.parentNode && !obj.iframelayer) var ifr = obj.parentNode.insertBefore(document.createElement("iframe" ), obj);
  7.   if(obj.currentStyle.zIndex != "" && parseInt(obj.currentStyle.zIndex)>1 ) {
  8.    ifr.style.zIndex = parseInt(obj.currentStyle.zIndex)-1;
  9.   }
  10.   ifr.src = "javascript:false";
  11.   with(ifr.style) {
  12.    filter = "mask()";
  13.    position = "absolute";
  14.   }
  15.   obj.iframelayer = ifr;
  16.  }
  17.  if (obj.iframelayer) {
  18.   with(obj.iframelayer.style) {
  19.    width  =  obj.offsetWidth+"px";
  20.    height =  obj.offsetHeight+"px";
  21.    visibility = "visible";
  22.   }
  23.   ifrlayer.move(obj)
  24.  }
  26. },
  27. hide:function(obj) {
  28.  if(!obj) return; obj = typeof(obj)=="string" ? document.getElementById(obj) : obj; if (!obj) return;
  29.  if(obj.iframelayer) {
  30.   obj.iframelayer.style.visibility="hidden";
  31.  }
  32. },
  33. move:function(obj) {
  34.  if(obj && obj.iframelayer) {
  35.      with(obj.iframelayer.style) {
  36.       top = obj.offsetTop+"px";
  37.       left =  obj.offsetLeft+"px"
  38.      }
  39.  }
  40. }
  41. }


ifr.make(monelement_ou_un_id) => génère automatiquement une iframe sous l'élément
ifr.hide(monelement_ou_un_id) => cache l'iframe (à utiliser après que l'élément a été caché)
ifr.move(monelement_ou_un_id) => déplace l'iframe lorsque l'on déplace l'élément
 
ex :  

Code :
  1. var mondiv = document.getElementById("lediv" )
  2. mondiv.style.display = "block";
  3. firlayer.make(mondiv);
  6. mondiv.style.display = "none";
  7. ifrlayer.hide(mondiv);
  9. mondiv.style.top = "400px";
  10. ifrlayer.move(mondiv);
  12. mondiv.style.height = "250px";
  13. ifrlayer.make(mondiv);


exemple simple :  
sur la Fnac clique ICI
attend que la page soit chargée, clique sur l'image du produit et déplace le bloc. (Teste sous IE bien sur :o)

FlorentG a écrit :


IE7 a corrigé la chose heureusement.


En mode strict seulement, en mode quirks c'est Go back to IE and Go Fuck Yourself

Message cité 2 fois
Reply

Marsh Posté le 09-01-2007 à 22:16:57    

gatsu35 a écrit :

Ou en faisant passer une iframe dessous.
Tiens j'ai developpé cet objet qui génère une iframe seulement pour IE (pour IE7 faudra juste sortir une règle en plus)


YOU'RE TEH MIGHTY IE FUCKER [:hahaguy]

Message cité 1 fois
Reply

Marsh Posté le 10-01-2007 à 07:19:40    

FlorentG a écrit :

YOU'RE TEH MIGHTY IE FUCKER [:hahaguy]


YOU'RE THE RECEIVER [:hahaguy][:hahaguy][:hahaguy][:hahaguy][:hahaguy]

Reply

Marsh Posté le 10-01-2007 à 11:10:57    

gatsu35 a écrit :

Tiens j'ai developpé cet objet qui génère une iframe seulement pour IE (pour IE7 faudra juste sortir une règle en plus)


 
Je viens de tester le lien de la fnac avec IE7 et FF2, c'est parfait avec les 2, tout fonctionne et je suis agréablement surpris de voir (enfin) de la transparence d'objets sous FF, it's good !

Message cité 2 fois

---------------
Brice de www.boursica.com
Reply

Marsh Posté le 10-01-2007 à 11:18:45    

briceboursica a écrit :

je suis agréablement surpris de voir (enfin) de la transparence d'objets sous FF, it's good !


Euh  [:johneh]  [:johneh] C'est plutôt sous IE que ça aurait été une surprise :D

Reply

Marsh Posté le 10-01-2007 à 11:33:17    

briceboursica a écrit :

Je viens de tester le lien de la fnac avec IE7 et FF2, c'est parfait avec les 2, tout fonctionne et je suis agréablement surpris de voir (enfin) de la transparence d'objets sous FF, it's good !


tu peux y aller sous Opera 8,9, safari 2, IE5, IE5.5, IE6, FF 1.0 1.5, 2.0  [:kbchris] Je suis juste fier du JS mais pas du code HTML/CSS qui a été fait pas 36 personnes dans un temps eclair :/


Message édité par gatsu35 le 10-01-2007 à 11:50:26
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed