Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial
  • Lezione 42 di 44
  • livello principiante
Indice lezioni

Visibilità dei layer

Modificare la visibilità di un layer html da Flash
Modificare la visibilità di un layer html da Flash
Link copiato negli appunti

SCOPO
Rendere visibile o invisibile un layer html

STRUMENTI

Richiamo funzioni Javascript da Flash

METODO

I layers html permettono la sovrapposizione di oggetti, all'interno di un documento, con la stessa logica dei layers usati da Macromedia Flash o Adobe Photoshop in fase di authoring. Il codice html di un layer è di questo tipo:

<div id="Layer1"

style="position:absolute; left:10px; top:10px; ; ; z-index:1">

contenuto del layer "Layer1"

</div>

Da notare:

  • l'identificativo/nome del layer - id - in questo caso "Layer1". Permette di identificare il layer e il suo contenuto tramite Javascript
  • il tipo di posizionamento del layer - position - in questo caso "absolute", cioè rispetto all'angolo superiore sinistro dell'area dei contenuti del browser• le coordinate x e y del layer - left e top - in questo caso 10 pixel e 10 pixel
  • la larghezza e l'altezza del layer - width ed height - in questo caso 80 e 84 pixel
  • il livello di profondità, o di impilamento, del layer - z-index - in questo caso 1. Serve a stabilire quale layer sta sopra e quale sta sotto, secondo la regola per cui il layer con lo z-index maggiore sta sopra il layer con lo z-index minore.

<div id="Layer1" style="position:absolute; left:10px; top:10px; ; ; z-index:1">
  contenuto del layer "Layer1"
</div>

In questo caso, il contenuto di "Layer2" si sovrappone a quello di "Layer1", dal momento che i due livelli hanno stesse dimensioni e posizione.

La pagina html

La nostra pagina è costruita in questo modo: quattro layer di base, non sovrapposti, contenenti uno un filmato flash, gli altri un'immagine. Nello schema in figura, sotto il tipo di contenuto, il nome del layer:

<div id="nome del layer" style="position:absolute;...</div>

Primi 4 layers

Sopra i tre layers con le immagini ce ne sono altri tre, chiaramente con z-index maggiore, contenenti ciascuno un filmato Flash vuoto che copre l'immagine nel layer sottostante:

I tre layers soprastanti

In modo da ottenere:

I layers della pagina

Visto da una ipotetica prospettiva:

Composizione della pagina

Il codice dei layers è di questo tipo:

<div id="menu" [...] z-index:1;">codice di incorporamento del filmato</div>
<div id="sotto1" [...] z-index:2;">codice di incorporamento dell'immagine</div>
<div id="sotto2" [...] z-index:3;">codice di incorporamento dell'immagine</div>
<div id="sotto3" [...] z-index:4;">codice di incorporamento dell'immagine</div>
<div id="sopra1" [...] z-index:5;">codice di incorporamento del filmato</div>
<div id="sopra2" [...] z-index:6;">codice di incorporamento del filmato</div>
<div id="sopra3" [...] z-index:7;">codice di incorporamento del filmato</div>

Il filmato Flash

L'unico filmato Flash di cui parlare è quello che sta nel layer più in basso di tutti, in alto a sinistra nella pagina: contiene sei pulsanti che permettono, a coppie, di rendere visibile e invisibile ciascuno dei tre layers contenenti i filmati che coprono le immagini.

Ai pulsanti che rendono invisibili i layers è associato questo codice:

on (release) {
  getURL("javascript:toggleVisibility('sopra2', 'hide')");
}

Tramite il getURL, viene invocata la funzione toggleVisibility (che vedremo più avanti), alla quale vengono passati due parametri:

  • il nome del layer da rendere invisibile, nell'esempio "sopra2"
  • la stringa indicante il fatto che il layer deve essere reso invisibile, 'hide'

L'unica differenza tra i pulsanti che fanno sparire i tre layers, è il nome del layer indicato.

Ai pulsanti che rendono visibili i layers, è associato un codice molto simile:

on (release) {
  getURL("javascript:toggleVisibility('sopra2', 'show')");
}

Viene chiamata anche in questo caso la funzione toggleVisibility, solo che viene specificato 'show' come secondo parametro ad indicare che il layer va reso visibile.

La funzione Javascript

La funzione Javascript è una modifica della versione originale di Eddie Traversa (nirvana.media3.net): serve a rendere visibili o invisibili i layer, utilizzando metodi diversi a seconda del browser (Netscape Navigator 4 e 6, Internet Explorer).

<script language="JavaScript1.2">
function toggleVisibility(id, mode) {
  var NNtype = (mode == "show") ? mode : "hidden";
  var IEtype = (mode == "show") ? "visible" : "hidden";
  var WC3type = (mode == "show") ? "visible" : "hidden";
  if (document.getElementById) {
    eval("document.getElementById(id).style.visibility = "" + WC3type + """);
  } else {
    if (document.layers) {
      document.layers[id].visibility = NNtype;
    } else {
      if (document.all) {
      eval("document.all." + id + ".style.visibility = "" + IEtype + """);
    }
  }
 }
}
</script>

La funzione riceve due parametri: il nome del layer su cui agire, id, e la stringa mode, indicante se bisogna renderlo visibile od invisibile.

FILES

visualizza l'esempio | scarica l'esempio


Ti consigliamo anche