2010-06-30 14 views
13

Tengo una barra de menú que tiene varios elementos de submenú. La página de inicio contiene una animación flash que se encuentra debajo de la barra de menú. Cuando los elementos del submenú se encuentran sobre el archivo flash, el archivo flash se mostrará sobre la barra de menú. Intenté con z-index, pero no funcionará.Insertar div sobre flash en IE

Este problema solo ocurre en IE.

¿Algún consejo?

Gracias

Respuesta

25

Sí Chris,

Hay que establecer un atributo a parpadear código de inserción

<param name="wmode" value="transparent" /> 

Esto funcionará

+0

Tengo el mismo problema con IE-11 y no funcionó ... alguna idea? –

6

donde se inserta el archivo flash, es necesario establecer el modo de ventana a transparente:

<embed src="flashfile" wmode="transparent"> 
+0

no sabía que era así de simple. Estaba buscando en la red y había gente que decía que esto no era posible, así que probé suerte en stackoverflow y ¡ahí estaba la respuesta! Muchas gracias – seedg

2

Munir y Tim ya se dio una buena respuesta, pero me gustaría añadir algunas informaciones adicionales:

  • sitio web de Adobe tiene una documentación sobre Flash OBJECT and EMBED tag attributes
  • transparent y opaque valores causará un problema de accesibilidad, porque ellos esconde el contenido de tu objeto flash a los lectores de pantalla. Solo el valor predeterminado de window es correcto para los lectores de pantalla
  • z-index no hará ni podrá hacer nada en su caso: el objeto está gestionado por un complemento, el flash o una alternativa, y lo hace bastante fuera de la página presentada por el navegador. Todavía interactúa con él (ancho, alto, JS) pero en cuanto a la representación ...
  • Hay un problema similar con los elementos seleccionados en IE6 (y 7?) Donde ningún valor z-index en un elemento posicionado representará el este último sobre el seleccionado (este es un error debido a la forma en que IE considera los elementos seleccionados)
  • debe probar en OS X y Linux, hay bastantes problemas con el flash en estos sistemas operativos.
2

Hay una mejor solución para esto ya que agregar ese parámetro no siempre funciona especialmente si se usa un objeto flash dentro de un div.

Al final de la página de registro del objeto flash, así:

<script type="text/javascript"> 
    swfobject.registerObject('FlashIdName'); 
</script> 

luego llamar a una función de JavaScript, así:

<script type="text/javascript"> 
    swfobject.registerObject('FlashIdName'); 
    Chk_Flash('FlashIdName'); 
</script> 

Esta función hace lo siguiente:

<script type="text/javascript"> 
function Chk_Flash(ToRegister) 
{ 
    document.getElementById('FlashIdName').style.visibility = 'visible'; 
    return true; 
} 
</script> 

Y esto funciona en todos los navegadores 100%


También puede utilizar:

document.getElementById('FlashIdName').style.visibility = 'hidden'; 

Ahora bien, si usted está llamando acciones en la etiqueta div como por ejemplo:.

document.getElementById('MyDiv').style.visibility = 'block'; 

o document.getElementById ('myDiv') estilo .visibility = 'none';

Lo que hay que hacer primero es hacer la acción div continuación, llamar a la visibilidad de flash en este orden:

document.getElementById('MyDiv').style.display = 'block'; 
document.getElementById('FlashIdName').style.visibility = 'visible'; 

disfrutar!

1

Usar estos valores en su lugar 'transparente':

wmode="opaque" 
1

que finalmente fue capaz de encontrar una solución que podría funcionar en ambos todos los navegadores.

Si usara

<param name="wmode" value="transparent" /> 

, me gustaría obtener la salida deseada en IE pero no en Firefox y si yo solía

<embed wmode="transparent" ></embed> 

, me dieron el resultado deseado en Firefox pero no IE.

así que decidí usar tanto el cual funciona en todos los navegadores

<!--[if IE]> 
    <param name="wmode" value="transparent" /> 
<![endif]--> 

<embed wmode="transparent" ></embed>