Se connecter avec
S'enregistrer | Connectez-vous

Superposition calques selon image ou swf...

Dernière réponse : dans Programmation

Salut à tous,

LA question du jour :
Y a-t-il une différence de "comportement" entre une image et un flash au niveau de la superposition des calques (balise <div>) ?

...je m'explique :
1. J'ai une liste de liens. En plaçant mon pointeur sur un lien, j'ai un petit calque qui s'affiche avec du texte dedans.
2. J'ai une image que j'ai inséré dans un calque qui apparait à la droite de ces liens et au-dessus de laquelle il est prévu que s'affiche les infos-bulles expliquées en (1).

> Avec une image, ça marche.
> En remplaçant l'image par un .swf, l'ordre des calques est inversé : le flash passe au premier plan et mes infos bulles se retrouve en dessous, on ne les voit plus !

Y a-t-il des attributs à ajouter au swf pour qu'il se comporte comme je veux ?

J'ai trouvé sous google un attribut à mettre dans les <div> qui est le "z-index : #" (avec # un n°). Il permet de déterminer l'ordre de superposition des calques à la condition d'utiliser "position:absolute".
cf : http://fr.selfhtml.org//css/proprietes/positionnement.htm#z_index
Mais j'ai l'impression que ça ne marche que pour superposer des images...

Voilà, merci de m'avoir lu jusqu'au bout. ça fait un moment que je prends la tête là-dessus.
J'attends impatiemment vos avis et remarques, trucs et astuces, conseils et orientations quant à la résolution de ce problème.

@+++

Autres pages sur : superposition calques image swf

Lassé par la pub ? Créez un compte

Citation :
avant toute chose, supprime le mot calque de ton vocabulaire, ca ne veux rien dire : http://css.alsacreations.com/Bases-et-indispensables/Qu...

OK, je faisais l'amalgame entre calques et la balise <div>. Merci de me corriger.
Mais comme il y a superposition, je pense qu'on peut parler de calques quand même :) 

Citation :

sinon, a priori, il n'y a aucune différence entre un swf et une image...
faut mettre le z-index sur ton div...

Voilà la preuve que c pas vraiment pareil :

De ça :
  1. <html><head><title>z-index</title>
    

  2. </head><body bgcolor="FFFFFF" text="#000000">
    

  3.  
  4. <div style="position:absolute; top:100px; left:100px; z-index:1; border:thin solid #804000;">
    

  5. <b>1.</b><img src="chien.gif" width="208" height="181" border="0" alt="chien"></div>
    

  6.  
  7. <div style="position:absolute; top:130px; left:150px; z-index:4; border:thin solid #804000;">
    

  8. <b>2.</b><img src="chien.gif" width="208" height="181" border="0" alt="chien"></div>
    

  9.  
  10. <div style="position:absolute; top:160px; left:200px; z-index:2; border:thin solid #804000;">
    

  11. <b>3.</b><img src="chien.gif" width="208" height="181" border="0" alt="chien"></div>
    

  12.  
  13. <div style="position:absolute; top:190px; left:250px; z-index:3; border:thin solid #804000;">
    

  14. <b>4.</b><img src="chien.gif" width="208" height="181" border="0" alt="chien"></div>
    

  15.  
  16. </body></html>


Je change le code et je place un swf tout simple créé en qq secondes :
  1. <html><head><title>z-index</title></head>
    

  2. <body bgcolor="FFFFFF" text="#000000">
    

  3.  
  4. <div style="position:absolute; top:100px; left:100px; z-index:1; border:thin solid #804000;">
    

  5. <b>1er</b><img src="chien.gif" width="208" height="181" border="0" alt="chien"></div>
    

  6.  
  7. <div style="position:absolute; top:130px; left:150px; z-index:4; border:thin solid #804000;">
    

  8. <b>2e</b><img src="chien.gif" width="208" height="181" border="0" alt="chien"></div>
    

  9.  
  10. <div style="position:absolute; top:160px; left:200px; z-index:2; border:thin solid #804000;"> 
    

  11.   <b>3e</b> 
    

  12.   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="<a href="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" target="_blank">http://download.macromedia.com/pub/shockwave/cabs/flash...</a>" width="100" height="100">
    

  13.     <param name="movie" value="chien2.swf">
    

  14.     <param name="quality" value="high">
    

  15.     <embed src="coucou.swf" quality="high" pluginspage="<a href="http://www.macromedia.com/go/getflashplayer" target="_blank">http://www.macromedia.com/go/getflashplayer</a>" type="application/x-shockwave-flash" width="100" height="100"></embed></object>
    

  16. </div>
    

  17.  
  18. <div style="position:absolute; top:190px; left:250px; z-index:3; border:thin solid #804000;">
    

  19. <b>4e</b><img src="chien.gif" width="208" height="181" border="0" alt="chien"></div>
    

  20.  
  21. </body></html>


...et je m'aperçois avec désolation que le flash apparait en 1er plan alors qu'il devrait être en 3er plan (que ce soit sous FireFox ou IE d'ailleurs...)

Je sais pas quoi faire maintenant.

@+++

Citation :
avant toute chose, supprime le mot calque de ton vocabulaire, ca ne veux rien dire : http://css.alsacreations.com/Bases-et-indispensables/Qu...

Non seulement, le terme Calque a bien une signification, mais de plus, alsa ne dit pas de ne plus l'utiliser, le site demande juste de ne pas confondre.
Dans le cas d'une superposition de bloc avec transparence, je ne vois pas pourquoi Calque ne serait pas le terme le plus approprié.

elch a dit :
si l'on raisonne point de vue navigateur, je pense qu'il est difficile à la fois de gerer des plugins et des plans en même temps ...

C'est tout à fait ça, parce que ce n'est pas le navigateur qui gère le Flash, c'est un plugin.
Le Flash ne peut pas être placé en arrière plan avec une image GIF transparente dessus, par exemple, tout simplement parce que le navigateur rechercherait alors quoi afficher en dessous du GIF par transparence, mais il ne verrait rien puisque ce n'est pas lui qui gère directement l'affichage du fichier swf.
C'est valable pour Flash ou pour n'importe qu'elle autre média qui n'est pas affiché en natif par le navigateur, comme les vidéos, etc.

Citation :
oui mais c'est pas clair, autant utiliser les bon termes...

Oui, bien sûr, je répondais juste à ta demande de le rayer du vocabulaire.
Le terme calque a bien une utilité et en web comme en infographie, il est le meilleur terme pour désigner une superposition par transparence, notemment pour ceux qui, par exemple, développent des publicités pour le web.

Lassé par la pub ? Créez un compte

Créer un nouveau sujet