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.
muchas gracias, me ayudó mucho el wmode=”transparent”