Discussion :

[sagopa]

Bonjour,

J'ai superposé deux div. l'un comprenant du texte (ou autre), et l'autre comprenant une image (ou une vidéo). (Je ne rentre pas dans les détails pour ne pas compliquer les choses).

Les div "image" et "texte" sont superposés. Voici le code HTML simplifié:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div id="canvas" width="640" height="480"> 
  <div id="texte" width="640" height="480">  
    <!-- text --> 
  </div> 
  <div id="image" width="640" height="480"> 
     <iframe src="/cgi-bin/getImage.cgi"> 
     </iframe> 
  </div> 
</div>

On peut voir que dans la div "image", j'utilise un iframe qui fait appel à un CGI. Ce dernier affiche une image:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img width="640" height="480" id="player" src="/images/Camera 1.png" />

En faite, il faudrait que j'utilise la tag object à la place de iframe, mais j'ai un problème avec IE8: l'image provenant du CGI cache le texte. Malgré l'utilisation du paramètre wmode="transparent", je n'arrive pas à mettre l'image en arrière plan. D'ailleurs si vous avez une solution pour résoude ce problème je suis preneur...

Donc en utilisant iframe je peux voir le texte par dessus l'image. Sauf que, toujours avec IE8, j'ai un problème au niveau des événements javascript, tel que onClick, onMove, etc. Sur les autres navigateurs comme Firefox et Chrome, les événements javascript sont détectés sans problèmes. Or sur IE8 cela ne marche pas.

J'espère trouver une solution ici.

J'aimerais ajouter une précision. Sachant que j'ai ajouté les événements JavaScript à l'élément div ayant l'id canvas.

Les événements sont capturés si la souris se trouve sur un élément de la div ayant l'id texte. Par contre, pas de détection si la souris se trouve sur l'image, c'est-à-dire sur la div ayant l'id image.

J'ai l'impression que c'est à cause de l'iframe...

Comment pourrais-je faire ? Aidez-moi s'il-vous-plaît, je suis bloqué la-dessus.

[kantozor]

Bonjour,
Tu peux définir l'ordre d'affichage de tes div avec "z-index" en CSS. Il te suffit de déclarer les styles suivants :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
#image { z-index: 1; }
#text {z-index: 2; }

Pour avoir le texte au dessus de l'image...