Superposer une image sur un objet flash

Version imprimable

Bonjour,

alors mon but est dans le titre, mon problème est que ce ne marche, mais alors pas du tout :cry:
Et le problème vient pour moi de mon code CSS mais bon, peut être que je me trompe.

Mon code en question :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <td width="45%" > <div style="position: relative; z-index: 2;"> <a href="#"> <img src="truc.jpg" width="520" height="80" border="0" /> </a> </div> <div style="position: relative; z-index: 1;"> <object type="application/x-shockwave-flash" data="flash/<?php echo $ban; ?>" width="520" height="80"> <param name="movie" value="flash/<?php echo $ban; ?>" /> <p>Bannière</p> </object> </div> </td>
Donc là , l'image truc devrait se mettre par dessus la bannière avec les z-index mais là, l'image est dessus et l'objet flash dessous, sans 1 mm de superposition.
Quand je mets en position absolute les deux divs, le flash se met par dessus l'image malgré le z-index et ils sortent de la cellule du tableau ou ils sont censés etre affichés.

J'ai pourtant suivis la méthode de plusieurs site pour utiliser le z-index mais là, il y a un gros problème et je ne sais pas d'ou il vient.

Merci de votre aide. :ccool:

20/07/2010, 10h59
eckerdecker

C'est le problème avec les objets flash, pour y palier tu dois indiquer

Code:

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

Code:

1 2 3 4 5 <div style="position:relative"> <img en position absolute avec un z-index supérieur /> <object en position absolute avec un z-index inférieur></object> </div>
Ne pas oublier de renseigner les propriétés top et left de l'image et de l'objet.

20/07/2010, 11h06
CyrilD

Merci, ca m'a fait avancer mais c'est pas encore parfait ^^

J'ai mis ta ligne de code et quand mon image et l'objet flash sont en position absolute, le z-index marche sauf qu'elles sont en dehors de la cellule de tableau ou elle sont censés rester.

Avec une position relative, l'image et le flash ne se superposent toujours pas.

Aussi, ta ligne a supprimé la couleur de fond de ma bannière, c'est un peu embêtant. :calim2:

EDIT : je vais tester ta méthode bizûnûrs
20/07/2010, 11h12
Bisûnûrs

Et pour que le fond ne disparaisse pas :

Code:

<param name="wmode" value="opaque" />
20/07/2010, 11h13
eckerdecker

Je crois que tu n'aura pas le choix, quand tu auras régler les problèmes de placement, si tu veux que du html passe par dessus ton flash tu devras utiliser wmode=transparent, tu n'a qu'à donner une couleur de fond au conteneur de ton objet flash.

Citation:

Envoyé par Bisûnûrs

Et pour que le fond ne disparaisse pas :

Code:

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

Ou alors je dis n'importe quoi ... y'a longtemps que j'ai pas eut à faire ça ^^

La propriété opaque marche nickel et le code proposé par bisûnûrs marche très bien aussi.

Je mets mon code final pour ceux que ca peut intéresser :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<td width="45%" >
 
     <div style="position: relative">
 
      <a href="#"> <img src="images/calque.gif" width="520" height="80" border="0" style="position: absolute; z-index: 2; top: -40px" /> </a>
 
      <object type="application/x-shockwave-flash" data="flash/<?php echo $ban; ?>" width="520" height="80" style="position: absolute; z-index: 1; top: -40px">
        <param name="movie" value="flash/<?php echo $ban; ?>" />
        <param name="wmode" value="opaque" />
        <p>Bannière</p>          
      </object>      
     </div>
 
    </td>

Merci à vous deux en tout cas ;)

20/07/2010, 11h20
Bisûnûrs

Attention, tu n'as pas renseigné la propriété left ou la propriété right avec le position:absolute. Donc il se peut (en fait c'est même certain) que le positionnement par défaut soit différent selon le navigateur.

Pour une utilisation cross-browser du positionnement absolu, il faut en plus utiliser left ou right ET top ou bottom.
20/07/2010, 14h05
CyrilD

Sous FF et IE, le résultat est similaire en tout cas.

C'est peut etre parce que j'ai mise en forme le tout avec des tableaux