2010-06-30 15 views
13

Ho una barra dei menu con diversi sottomenu. La homepage contiene un'animazione flash che si trova sotto la barra dei menu. Quando gli elementi del sottomenu si trovano sopra il file flash, il file flash verrà visualizzato sulla barra dei menu. Ho provato con z-index, ma non funzionerà.Insert div over flash in IE

Questo problema si verifica solo in IE.

Qualche consiglio?

Grazie

risposta

25

Sì Chris,

È necessario impostare un attributo a lampeggiare il codice embed

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

Questo funziona

+0

Ho lo stesso problema con IE-11 e non ha funzionato ... qualche idea? –

6

Dove si inserisce il file Flash, è necessario impostare la modalità finestra per trasparente:

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

non sapevo che fosse così semplice. Stavo cercando in rete e c'erano persone che dicevano che non era possibile, quindi ho provato la fortuna su StackOverflow e c'era la risposta! Molte grazie – seedg

2

Muneer e Tim già dato una buona risposta, ma mi piacerebbe aggiungere alcune informazioni aggiuntive:

  • sito web di Adobe ha una documentazione su Flash OBJECT and EMBED tag attributes
  • transparent e opaque valori causerà un problema di accessibilità, perché loro nascondi il contenuto del tuo oggetto flash agli screen reader. Solo il valore predefinito di window è OK per gli screen reader
  • z-index non può e non può fare nulla nel tuo caso: l'oggetto è gestito da un plugin, il flash player o un'alternativa, e lo fa abbastanza al di fuori della pagina visualizzata dal browser. Interagisce ancora con esso (larghezza, altezza, JS) ma come per il rendering ...
  • C'è un problema simile con gli elementi selezionati in IE6 (e 7?) Dove nessun valore z-index su un elemento posizionato renderà il secondo la selezione (questo è un bug dovuto al modo in cui IE considera gli elementi selezionati)
  • si dovrebbe testare su OS X e Linux, ci sono alcuni problemi con il flash su questi sistemi operativi.
2

C'è una soluzione migliore a ciò aggiungendo che il parametro non sempre funziona specialmente se si utilizza l'oggetto flash all'interno di un div.

Alla fine della pagina registrare l'oggetto Flash in questo modo:

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

quindi chiamare una funzione JavaScript in questo modo:

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

Questa funzione esegue le seguenti operazioni:

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

E funziona su tutti i browser 100%


È anche possibile utilizzare:

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

Ora, se si sta chiamando azioni sul tag div come ad esempio:.

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

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

Quello che dovete fare è prima fare l'azione div quindi chiamare il visibilità lampo in questo ordine:

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

Enjoy!

1

Utilizzare questi valori invece e 'trasparente':

wmode="opaque" 
1

sono stato finalmente in grado di trovare una soluzione che potrebbe funzionare su entrambi i browers.

se ho usato

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

, vorrei avere l'output desiderato su IE ma non su Firefox e se ho usato

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

, ho avuto l'output desiderato in Firefox, ma non vale a dire.

così ho deciso di utilizzare sia che funziona su tutti i browser

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

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