- 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. <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 |