Visualizar menús desplegables HTML por encima de películas Flash

Este es otro tip "only for dummies", que es muy sencillo pero que da dolores de cabeza a la gente que apenas se inicia en el mundo de Ajax únicamente utilizando los códigos automáticos de Spry que trae Dreamweaver.

El problema que muchos se encuentran es que los menús desplegables les quedan por debajo de las peliculas Flash, aun estando está en un index inferior.

Esto tiene una solución muy sencilla, y pasa por añadirle la propiedad wmode de la pelicula Flash a valor invisible.

De manera que si estamos utilizando SwfObject para colocar el SWF, utilizariamos este código:

<script type="text/javascript">  
       var flashvars = {};
       var params = {};
       var attributes = {};
       params.wmode = "transparent";
       swfobject.embedSWF("a.swf", "flash", "320", "240", "10.0.0", "expressInstall.swf", flashvars, params, attributes);
</script>

Esta línea de código es suficiente para resolver el problema.

Aqui el ejemplo, por si alguien lo quiere ver

Comparte:

• 
• 
• 
• 
• 
• 
• 
• 
• 

Post relacinonados:

1. Sustituir un SWF por otro sin refrescar el HTML con Ajax
2. Texto con enlaces en Flash al estilo HTML
3. El nuevo motor de texto (Text Layout Framework) de Flash CS5
4. Nuevo formato de documento .XFL para Flash CS5

8 Comments »

1. Comment by Otaku RzO — 31 July, 2009 @ 3:44 pm

   Este truco también funciona cambiando:
   - params.wmode = "transparent";
   por:
   - params.wmode = "opaque";

   Para los que no quieran poner sus SWF sin fondo.
   

2. Comment by admin — 31 July, 2009 @ 4:34 pm

   Cierto, gracias por el comentario Otaku

3. Comment by Cay — 31 July, 2009 @ 9:51 pm

   Mucho ojito... wmode, bienvenido al infierno:
   http://www.dandolachapa.com/2006/10/18/wmode-bienvenido-al-infierno/
   

4. Comment by admin — 2 August, 2009 @ 6:18 pm

   Hola @Cay, gracias por el aporte
   Si, ya leí en su dia ese articulo de Zarate.
   Ciertamente no es la solución más óptima, pero saca del apuro a la gente primeriza que se encuentra con ese problema (que son muchos)..
   Lógicamente lo mejor es diseñar un layout en el que no tengas que pasar elementos html por encima de objetos Flash. Pero eso ya es otra historia..

5. Comment by miguelMoraleda — 21 August, 2009 @ 6:39 pm

   Bastante util, muchas gracias. Muy bueno el blog.

6. Comment by German Macias — 2 September, 2009 @ 1:18 pm

   Esto sirve para cualquier .swf??? Aunque no sea un menú?

7. Comment by cesar — 19 November, 2009 @ 12:27 pm

   gracias por el aporte ahora ire a probarlo

8. Comment by María — 24 May, 2010 @ 2:54 am

   Hola, he estado viendo como utilizando params.wmode = "transparent"; es muy útil porque me pasaba que el flash ocultaba el menú emergente.
   Mi problema viene cuando lo que tengo es un flash de una galería fliker "PictoBrowser" y no se dónde o como colocar este parametro, ya que el flash objet no viene deslosado como indicais mas arriba. Póngo mi código a ver si me dais una solución:

   Get the flash player here: http://www.adobe.com/flashplayer var so = new SWFObject("http://www.db798.com/pictobrowser.swf", "PictoBrowser", "610", "509", "8", "#EEEEEE"); so.addVariable("source", "keyword"); so.addVariable("names", "modernosalones"); so.addVariable("userName", "MUEBLES EPA"); so.addVariable("userId", "49400400@N07"); so.addVariable("ids", "modernosalones"); so.addVariable("titles", "off"); so.addVariable("displayNotes", "off"); so.addVariable("thumbAutoHide", "off"); so.addVariable("imageSize", "medium"); so.addVariable("vAlign", "mid"); so.addVariable("vertOffset", "1"); so.addVariable("colorHexVar", "EEEEEE"); so.addVariable("initialScale", "off"); so.addVariable("bgAlpha", "100"); so.write("PictoBrowser100421095435");

   Muchas gracias!

RSS feed for comments on this post. TrackBack URI

Leave a comment