Menu déroulant passe sous l'animation flash [Résolu]

Je sais pas si y'a vraiment besoin de tuto, tout a été dit... Enfin je veux bien détailler.

On a un objet flash, <embed> ou <object> suivant la preférence du développeur (si vous aimez le W3C ou pas, mais on ne va pas relancer le débat ^^), qui porte un id, mettons "anim".

<object id="anim">
  ou
<embed id="anim">

On a un menu déroulant, dont le conteneur principal est, mettons, une <ul>, avec un id, on va dire "menu".

<ul id="menu">

Dans l'objet flash, spécifiez le wmode en "opaque", avec une balise <param> si vous utilisez <object>, ou dans un attribut si vous utilisez <embed> :

<object id="anim">
  <param name="wmode" value="opaque" />
  ...
</object>

  ou

<embed id="anim" wmode="opaque" ...></embed>

Et dans le CSS on a simplement besoin que le menu déroulant ait un plus grand z-index que l'animation :

#anim {
  z-index: 1;
}

#menu {
  z-index: 2;
}

Je peux pas être plus clair :P ... D'autres questions ?

Bonjour,

C'est tout à fait possible de le faire. Il faut juste aller plus loin que le copier/coller de ce que l'on voit sur internet concernant la feinte du "wmode=transparent" :)

Il existe 3 modes pour l'affichage d'une animation flash : windows (défaut), opaque et transparent.

En mode par défaut l'animation sera toujours au-dessous de tout ce qui s'affiche dans la fenêtre du browser, pour la simple et bonne raison que l'animation flash est affichée "en dehors" du browser par windows (je ne rentre pas dans les détails technique).

Il faut donc utiliser le mode opaque ou transparent en fonction des besoins. Opaque conviendrait surement dans ton cas.

Toutes les explications sont ici : http://www.communitymx.com/content/article.cfm?cid=E5141

Bien à vous !

@ krok :
Incroyable ! Personne m'avait jamais parlé de ça. Je me suis laissé abuser et j'ai dit des conneries... Merci pour le lien, c'est super instructif :)

@ Alexandre :
je vais essayer de traduire de quoi ça cause... en gros, quoi.
Il y a trois modes d'affichage que l'on peut spécifier avec l'option wmode, jusque-là tu connais. Mais voyons les détails...

- le mode window :
c'est le mode par défaut. Avec ce mode, sous Windows, l'animation existe dans une instance d'affichage gérée par Windows, et pas par le navigateur. Ce qui fait que c'est plus performant, mais que ça va se superposer à tout le contenu. Et sous un Mac, c'est à peu près respecté mais les mouvements de l'animation peuvent faire des interférences bizarres...

- le mode opaque :
là c'est le navigateur qui prend en charge l'animation, donc on perd un peu en performance, mais ça permet de manipuler l'animation comme un bloc HTML normal ! Il y a un exemple (il faut mettre la souris sur les mots « DHTML Trigger »). Le site explique que ce mode est mal compris, les gens croient qu'il sert au contraire à placer l'animation au-dessus du reste... Mais si on lui donne un z-index, ça marche !
La source de confusion c'est que Macromedia recommandait d'utiliser le mode transparent pour travailler avec les « calques DHTML », c'est-à-dire les div contrôlées par JavaScript.

- le mode transparent :
il est aussi géré par le navigateur, ce qui permet de manipuler l'animation comme en mode opaque. Le plus, c'est que l'arrière-plan de l'animation est rendue transparente, ce qui laisse apparaître les éléments présents derrière, masqués seulement par les objets de premier plan de l'animation. Ça peut être utile pour des objets non rectangulaires. Par contre, la gestion de la transparence est assez gourmande en ressources...
Dans le cadre en rouge il précise qu'il faut faire attention si on a des zones cliquables derrière un objet transparent : si on veut cliquer, c'est le Flash qui prend le focus (c'est-à-dire, le clic « atterit » sur l'objet Flash).

Voilà j'espère que ma traduction n'est pas trop approximative, j'ai du mal à ne pas broder :P

Un dernier détail, mais je pense que tu l'auras compris : pour utiliser les modes en flash, les codes sont :

wmode="window"
  ou
wmode="opaque"
  ou
wmode="transparent"

Bon courage ;)

j'ai eu le même problème mais en ASP.NET !
Je te conseille de créer deux div :
- un contenant ton menu
- un autre contenant ton flash
ensuite il faut utiliser du CSS
position : relative pour les deux
z-index : celui qui aura le plus grand z-index sera au-dessus

Tu peux aussi manipuler ton div avec padding-left, top , etc...

J'avais déjâ séparé en deux div .. mais en tout cas, çà ne marche pas même avec le z-index (j'ai esseyer autre chose pour voir si javais fait une erreur de frappe quelque part .. mais le z-index marche si je prends autre chose que cette fichu animation flash)

.. (L'animation flash est comprise avec une zone d'input dans une même classe .. qui elle si on la met en z-index plus important passe au-dessus et donc réagis bien au z-index mais pas le flash)

Personne ne sait ? :'(

bonjour,
ça faisait longtemps ... mais aujourd'hui je repique ma crise ....
ce forum est ouvert à tous, mais par respect pour ceux qui voudraient vous aider, pour ceux qui vous répondent,
pourquoi ne pas vous inscrire ?
c'est gratuit et sans risque (sauf celui de trouver des gens indésirables qui parcourent les forums pour polluer ...)
merci

Tu peux montrer ton code ?

Merci à toi Groarh et à tous pour vos réponses !

bg62 je ne vois pas en quoi c'est une manque de respect :( ... et chacun à ses raisons personnels :p

Merci beaucoup, mais sa n'éxiste pas en français ça ?

Wouaahhh ! Merci beaucoup, j'ai eu de la chance que ça tombe sur mon post ça !

1000, NON, 10 000 mercis, ça marche !!!!

Heureux d'avoir pu t'aider, ciao !

Bravo, cela fonctionne même sans z-index.
Merci.

Ouais, mais je crois que çe ne marche pas sous IE malheureusement :s

Quel IE ?
http://www.generation-nt.com/youtube-ie6-support-fin-actualite-835981.html
http://www.w3junkies.com/toocool/

Yerk yerk ^^

8

Ah zut c'est chiant ça, ça veut dire qu'il faut attendre la version 9… ou 10…

Ouais mais avec IE faut pas s'attendre à dex prouesses sinon on risque d'être déçu mdr ^^'

Merci a toi Groarh, et aussi a toi ki a posé la kestion
Merci a vous tous, vous etes de vrai pôtes.
Moi g sui nouveau sur le site et je suis deja tres heureux de vous connaitre