2008-09-23 16 views
9

Un sitio en el que estoy trabajando tiene encabezados de Flash (usando swfobject para incrustarlos). Ahora estoy obligado a codificar en un poco de HTML que se supone que se superpone a la película Flash.¿Cómo coloco contenido HTML encima de una película Flash?

He intentado configurar z-index en el contenedor del elemento Flash y el div (absolutamente posicionado) pero sigue "desapareciendo" detrás de la película Flash.

Estoy esperando una solución CSS, pero si hay un poco de magia JS que hará el truco, estoy de acuerdo.

Actualización: Gracias, al configurar wmode a "transparente" principalmente lo arregló. Solo Safari/Mac todavía ocultaba el div detrás del flash en el primer show. Cuando cambiaba a otra aplicación y la devolvía, estaba al frente. Pude solucionar esto estableciendo los estilos iniciales del div en display: none; y lo hago visible a través de JS medio segundo después de que la página se haya cargado.

+0

Podría armar un ejemplo de trabajo, porque tengo el mismo problema y puede Que funcione, sería bueno ver si soy yo o mi navegador ... – svinto

Respuesta

20

Asegúrese de que el FlashVar "embed" está ajustado a "transparente" o "opaco", pero no el valor por defecto, "de ventana" ... entonces usted debería ser capaz de utilizar CSS índice z

+1

wmode es como un ídolo dorado enterrado en las junglas más profundas de América del Sur. Recuerdo que estaba extasiada la primera vez que me enteré. –

+1

Solo tenga en cuenta que no funciona con los navegadores Linux, excepto con la versión beta de Flash 10 y los navegadores más recientes (Fx 3.0.0+, Opera 9.Más de 50 años, no sé de otros) –

+3

¿Cuántos usuarios de Linux NO mantienen sus navegadores y programas asociados actualizados? Esa es una demografía comprensiva por definición. –

4

seguimiento nota superior: como descubriste en tu actualización, mostrar HTML para mostrar sobre Flash es actualmente una proposición compleja, e incluso con la magia JS descubriste que deberías esperar que Flash bloquee tu HTML para algunos espectadores que usan off-browsers , versiones anteriores, etc.

Si para usted es importante alcanzar una audiencia de navegación arbitrariamente grande (dispositivos móviles, por ejemplo), rediseñar su contenido para evitar la superposición puede ahorrarle dolores de cabeza a largo plazo.

+0

Usted tienes razón, por supuesto. En este caso, al cliente no le importa, pero es un buen consejo en general. – Lasar

+0

La otra pregunta en este caso, sin embargo, es ¿cuántos dispositivos móviles admiten Flash? El iPhone, estoy seguro, tal vez algunos de los teléfonos inteligentes con Windows Mobile, pero después de eso? (Además, no soy muy versado en el desarrollo de aplicaciones web para móviles, así que realmente no sé ...) –

+0

Steve: ¡ataca eso, revézalo! La mayoría de los teléfonos inteligentes modernos admiten Flash, excepto el iPhone, que no es compatible. Específicamente, la mayoría de los teléfonos modernos (es decir, aquellos con navegadores web) tienen Flash Lite, generalmente la versión 2.xo 3.x. Flash Lite 2.x es más o menos similar a Flash 6, y Lite 3.x es similar a Flash 8. – fenomas

0

Conjunto esta variable flash de la siguiente

s1.addParam("wmode","transparent"); 

continuación en el uso de etiquetas div este estilo

style="z-index:inherit; 

se solucionará el problema.

0

Al igual que Steve Paulo dijo, luego viene la parte divertida cuando el HTML que está sentado en la parte superior de su flash está llamando más de flash ...

Oh la diversión que tuvimos con los que uno, que implicó el establecimiento de la Z- índice para ser realmente más bajo para tener en cuenta el flash pensando que son las rodillas de las abejas y, por lo tanto, siempre deben estar en la parte superior.

1

código de uso en la siguiente estilo, funciona en Firefox y Chrome

<object id='myId' width='700' height='500'> 
      <param name='movie' value='images/ann/$imagename' /> 
      <param name='wmode' value='transparent' /> 
      <!--[if !IE]>--> 
      <object type='application/x-shockwave-flash' data='images/ann/$imagename' width='700' height='500' wmode='transparent'> 
      <!--<![endif]--> 
      <div> 
       <h1>Please download flash player</h1> 
       <p><a href='http://www.adobe.com/go/getflashplayer'><img src='http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a></p> 
      </div> 
      <!--[if !IE]>--> 
      </object> 
      <!--<![endif]--> 
     </object> 
Cuestiones relacionadas