- Evitare la sovrapposizione di Flash su altri elementi -
 
COSA SERVE PER QUESTO TUTORIAL
Download | Chiedi sul FORUM | Glossario conoscenze basiche di HTML e JavaScript
Il parametro WMode per impostare lo z-index di Flash

IL PAREMTRO WMODE
Cos'è e come funziona il parametro WMode.

A tutti gli sviluppatori web prima o poi è capitato di imbattersi in problemi di sovrapposizione di oggetti incorporati Flash con elementi della pagina HTML, in particolare la situazione tipica è un menu che dovrebbe sovrapporsi ad una pubblicità Flash mentre invece vi finisce sotto.
Flash dalla versione 6 ha previsto un work-around per questo genere di problemi: il parametro wmode. Per l'elemento OBJECT bisogna inserire un nuovo PARAM, mentre per EMBED è sufficiente un attributo wmode con valore transparent:


<div>
    <object width="320" height="240">
        <param name="movie" value="esempio.swf">
        <param name="wmode" value="transparent">
        <embed src="esempio.swf" width="320" height="240" wmode="transparent"></embed>
    </object>
</div>

Proviamo ora ad aggiungere un DIV in posizione assoluta che si sovrapponga (prima di quello precedente):


<div style="position:absolute;background-color:red;width:350px;height:50px">
    DIV
</div>

Potete provare a togliere wmode e vedere cosa accade. wmode rende l'oggetto Flash un elemento che si comporta come qualsiasi altro tag HTML, ed è quindi possibile anche servirsi degli z-index per stabilire chi debba stare davanti. Se vogliamo far stare davanti il filmato possiamo dargli un valore z-index superiore a quello del DIV:


<div style="position:absolute;background-color:red;width:350px;height:50px;z-index:1">
    DIV
</div>
<div style="position:absolute;z-index:2">
    <object width="320" height="240">
        <param name="movie" value="esempio.swf">
        <param name="wmode" value="transparent">
        <embed src="esempio.swf" width="320" height="240" wmode="transparent"></embed>
    </object>
</div>
IMPOSTARE WMODE TRAMITE JAVASCRIPT
Attivare il WMode su filmati esterni (pubblicitari) su cui non si ha controllo.

Il metodo precedentemente illustrato è semplice ed efficace ma richiede di avere il controllo completo sull'oggetto Flash in questione, mentre al contrario spesso ci si trova a dover lavorare con oggetti creati da script esterni, in particolare per le pubblicità, e se i vari advertiser non utilizzano wmode il problema si ripresenterà. Vediamo dunque una breve funzione JavaScript che abilita la funzione WMode su un particolare oggetto (sia esso OBJECT o EMBED):


function attivaWMode(obj) {
    // Creiamo una copia dell'oggeto Flash
    var nuovo = obj.cloneNode(true);

    if (nuovo.tagName == "OBJECT"){
        // Se è un OBJECT aggiungiamo un PARAM
        var param = document.createElement("param");
        param.name = "wmode";
        param.value = "transparent";
        nuovo.appendChild(param);
    } else if (obj.tagName == "EMBED"){
        // Se è un EMBED aggiungiamo l'attributo
        nuovo.setAttribute ("wmode","transparent");
    }

    // Rimpiaziamo l'oggetto Flash con quello nuovo.
    // Il filmato SWF verrà ricaricato.
    obj.parentNode.replaceChild (nuovo, obj);
}

In sostanza si tratta di sostituire tutti gli oggetti Flash con una loro versione con wmode impostato su transparent, con l'unico inconveniente che il filmato verrà ricaricato. Per minimizzare questo problema inseriamo il seguente script prima della chiusura del BODY:


// Prendiamo tutti gli OBJECT e tutti gli EMBED
var objs = document.getElementsByTagName("object");
var embeds = document.getElementsByTagName("embed");

// Attiviamo il WMode per gli OBJECT
for(var c1=0;c1<objs.length;c1++)
	attivaWMode(objs[c1]);

// Attiviamo il WMode per gli EMBED
for(var c1=0;c1<embeds.length;c1++)
	attivaWMode(embeds[c1]);

 

<< INDIETRO by VeNoM00