Después de tanto buscar, buscar y buscar.. Probar, probar y probar eh llegado a una conclusión que me permitirá saber por donde empezar a solucionar este problema en futuros proyectos y creo que este post será solución para muchos.
Un objeto SWF incrustado en nuestro HTML es leído o interpretado por nuestro navegador y automáticamente se le asigna un valor superior de “z-index”, si bien para muchos esto no presenta ningún problema, a la hora de manipular etiquetas div’s y realizar alguna que otra estructura compleja esto puede convertirse en un verdadero dolor de cabeza (lo eh vivido en carne propia).
Bien las opciones que e visto por ahí son:
- Modificar mediante CSS las propiedades z-index de la etiqueta div que contenga el objeto SWF.
-
#Mi_Etiqueta_Div{
-
z-index:100;
-
}
- Modificar las propiedades z-index de la etiqueta object.
-
object{
-
z-index:-1;
-
}
- Y/O agregar la propiedad WMODE al objeto SWF.
-
<param name="wmode" value="transparent" />
Todas funcionan pero solo si se las aplica de forma correcta…
Eh notado que cuando insertamos un objeto desde Dreamweaver 8 en adelante el script asignado a dicho objeto es diferente ya que utiliza javascript como complemento.
-
<script type="text/javascript">
-
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0','width','100','height','100','title','archivo’,'src','archivo','quality','high','pluginspage','http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash','movie','archivo' ); //end AC code
-
</script>
-
<noscript>
-
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="100" height="100" title="archivo">
-
<param name="movie" value="archivo.swf" />
-
<param name="quality" value="high" />
-
<embed src="archivo.swf" quality="high" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="100" height="100"></embed>
-
</object>
-
</noscript>
Luego de dar vueltas y vueltas mirando el código HTML de uno de mis proyectos eh notado que al incrustar el objeto “a la antigua” (versiones anteriores a Dreamweaver 
es posible solucionar este inconveniente.
-
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="100" height="100" title="archivo">-
-
<param name="movie" value="archivo.swf" />
-
<param name="quality" value="high" />
-
<embed src="archivo.swf" quality="high" width="100" height="100" name="archivo" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
-
</object>
Pero para resumir, cuales serian los pasos:
1. Incrustar el objeto SWF utilizando el método antiguo
-
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="100" height="100" title="archivo">
-
<param name="movie" value="archivo.swf" />
-
<param name="quality" value="high" />
-
<embed src="archivo.swf" quality="high" width="100" height="100" name="archivo" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
-
</object>
2. Aplicar la propiedad WMODE al objeto
-
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="100" height="100" title="archivo">
-
<param name="movie" value="archivo.swf" />
-
<param name="quality" value="high" />
-
<param name="wmode" value="transparent" />
-
<embed src="archivo.swf" wmode="transparent" quality="high" width="100" height="100" name="archivo" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
-
</object>
3. Y si es necesario modificar los valores de z-index del objeto y las etiquetas div que sean necesarias.
-
#Mi_Etiqueta_Div{
-
z-index:100;
-
}
-
-
object{
-
z-index:-1;
-
}
Con esto es suficiente para solucionar el inconveniente. Cualquier duda puedes hacerla en los comentarios de este Post.
tengo una duda con este codigo … estoy haciendo una pagina web y en la parte superior tengo un menu de navegacion.. es un menu despleglable y abajo de el hay una galeria de fotos hecha en flash. lo que pasa es que cuando paso el mouse por el menu la parte que se desplega no se ve ..! por que el video lo tapa… :S como hago para que el video deje de taparlo ¿¿ please dime…
Si ya probaste con el ejemplo de este tutorial sugiero que le apliques la misma propiedad (z-index) a cada uno de los cuadros desplegables ya que posiblemente se encuentren por separado y no agrupados dentro de un mismo DIV o un mismo elemento. Si aun asi no funciona intenta darle un valor negativo al elemento flash mas bajo, por ejemplo (-200) para asegurarte de que ningún elemento este por encima de dicho valor. Si luego de probar con estas alternativas no resulta no dudes en consultar nuevamente.
Saludos
Gracias eres un genio!!!!
Tengo problemas con la vista del swf en el Explorer, y sigo con el problema que el menu se ve por detrás del objeto swf en el Firefox, aun como los códigos escritos.
¿Qué solución me sugieren?
Gracias!
Agustina, Se podrá ver el problema? quizás sea mas fácil ofrecerte una
solución
Se me ocurre que podes agregar un valor de ID a la etiqueta object y asignar el valor de z-index inferior, así mismo seria recomendable que le proporciones un valor mayor al contenedor de tu menú para establecer una posición, eso mismo es ya que cuando se crean los elementos se les asigna una posición según este escrito en el código fuente HTML.
Otra solución en el caso que no funcione la primera puede ser incrustar el SWF antes de la etiqueta que estés utilizando para tu menú (supongo que un DIV) y que modifiques los estilos para asignarle la posición que desees en el sitio. Al poner el SWF mas cercano a los encabezados el valor de z-index por defecto será meno y quizás el problema se solucione.
muy bueno, no se si da el caso a mi problema, pero igual necesito ayuda el caso es que estoy haciendo mi pag y pues cuando le pongo el SWF a la parte que reserve para ese swf, ese swf es el header y en el va el menu desplegable pero al momento de de poner el mouse ensima de un boton que se despliega hacia abajo no aparece el submenu, aparece es debajo de las otras imagenes del body gracias. espero me puedan ayudar.
Hola que tal, muy buena la solucion, me funciono muy bien el unico inconveniente es que el video realmente me quedo con un fondo transparente que es algo que yo no queria, simplemente que me el menu se desplegara sobre el video si me pueden ayudar a solucionarlo realmente se los agradeceria mucho
Hola les cuento que solucione mi problema cambiando transparent por opaque, les cuento por si a alguien le sirve XD, gracias.
Hola a todos tengo una duda, y quisiera que me ayuden. resulta que estoy construyendo uina web en la cual estoy ocuapando una barra estatica o fija similar a la de facebook en donde se encuentra el chat de este y en el contenido de la pagina tengo embed de youtube y vimeo. resulta que al momento de bajar con scroll estos embed se montan sobre la barra no respetando el z-index que se le asigno.
¿Alguien tiene alguna solución para esto?
Agradecido, Saludos
Creo que esto puede ayudar
http://stackoverflow.com/questions/326196/ff3-windows-css-z-index-problem-with-youtube-player
Sí, efectivamente quitandole el javascript al objeto flash dentro del html es la unica forma en que se pueden poner otros objetos sobre el con el z-index.
muchas gracias por la solución
huy gracias bro, a mi me funciono, y esto es mas sencillo que cambiar los z-index.
saludos desde Ecuador
muchisimas gracias tio…. eres un crack
auque todavia no lo hago funcionar con IE8
solucionado me deje de poner
muchas gracias tio
Buenas a todos. .
Me estoy volviendo loco para poder hacer una cosa relacionada con este tema.
Les explico.
Estoy haciendo una web que tiene de fondo un SWF (aplicando swffit y swfobject) El resultado que quiero conseguir es que el fondo, Y SOLO EL FONDO, se ajuste a la resolucion de panatalla. Hasta ahí todo bien.
Luego aprovechandome de z-index ordeno el fondo(0), una caja blanca con transparencia(1) y por ultimo, encima de todo, el contenido(2).
Cuando lo ejecuto en mi ordenador, lo veo de muerte. Es como yo quiero.
Lo subo en el servidor y en mi ordenador lo veo bien tambien.
Pero en otros ordenadores que no sean el mio el SWF del fondo se ha plantado justo delante del todo impidiendo que las 2 capas de despues se vean.
Cuando intento añadirle un z-index al swfobject no tengo ni idea de donde hacerlo.
PORFAVORRr! que alguien me heche una mano. Me voy a volver loco. Acudo a vosotros, por que sois la hostia. Gracias! Reinaldo!
Hola reinaldo pon el link del sitio para poder ayudarte
Saludos
Eh! Gracias mil!
QUE BUENA AYUDA GRACIAS…
Te Rifaste HEEE…si me sirvio y jalo de maravilla solo q el “ID del objeto” te marca algo quitandolo , FUNCIONA MAS RAPIDO
TKS!!
No tienes idea de lo mucho que me has ayudado, de verdad miles de gracias… sigue así.
Dios te bendiga.
esta excelente! gracias
Maestro, gracias. Espero no me ponga problemas futuros.
Estoy trabajando en joomla y puse un banner swf, además tuve que crear un menu css con sub menues que aparecian bajo el banner swf. Con sólo aplicar el
se solucionó el problema.
excelente ayuda.
gracias
Gracias, me fue de gran ayuda
muchas gracias, me ayudó mucho el wmode=”transparent”