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

Layer cliccabile

Rendere cliccabile un filmato senza usare un pulsante
Rendere cliccabile un filmato senza usare un pulsante
Link copiato negli appunti

SCOPO

Associare un link ad un filmato senza editare l'swf

STRUMENTI

Layer html | Tag wmode per la trasparenza

METODO
Perchè il filmato sia "cliccabile" senza che vi sia un pulsante trasparente al suo interno, è necessario sovrapporvi un layer html, e rendere cliccabile quest'ultimo.

La disposizione dei layer sarà di questo tipo:

<div id="Layer1" style="position:absolute; width:400px; height:100px;

z-index:1; left: 50px; top: 50px; background-color: #CCCCCC;

layer-background-color: #CCCCCC; border: 1px none #000000">

codice filmato </div>

<div id="Layer2" style="position:absolute; width:400px; height:100px;

z-index:2; left: 50px; top: 50px; border: 1px none #000000"

onClick="richiamo funzione" ></div>

codice layer 1

codice layer 2

Perchè il filmato non si sovrapponga al layer html, è necessario settarne lo sfondo come opaco o trasparente, tramite l'attributo wmode.

Inoltre, perchè il layer abbia "consistenza", bisogna settare come immagine di sfondo una gif trasparente.

All'evento onClick relativo al layer superiore chiameremo una funzione definita nei tag <head> della pagina html. Il codice finale:

<html>

<head>

<title>Layer Cliccabile</title>

<script language="JavaScript" type="text/JavaScript">

<!--

function miaFunzione() {

// codice da eseguire al click,

// come l'apertura di una popup

}

//-->

</script>

</head>

<body bgcolor="#FFFFFF" text="#000000">

<div id="Layer1" style="position:absolute;width:400px;

height:100px; z-index:1; left: 50px; top: 50px;

background-color: #CCCCCC; layer-background-color: #CCCCCC;

border: 1px none #000000">

<object

classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"

codebase="[...]"

width="400" height="100">

<param name=movie value="filmato.swf">

<param name=quality value=high>

<param name=wmode value=opaque>

<param name="BGCOLOR" value="#CCCCCC">

<embed

src="filmato.swf"

quality=high

wmode=opaque

pluginspage="[...]"

type="application/x-shockwave-flash"

width="400" height="100"

bgcolor="#CCCCCC">

</embed>

</object></div>

<div id="Layer2" style="position:absolute; width:400px;

height:100px; z-index:2; left: 50px; top: 50px;

background-image: url(blank.gif);

layer-background-image: url(blank.gif);

border: 1px none #000000" onClick="miaFunzione()"></div>

</body>

</html>

Funzione javascript da richiamare al click

Codice per il primo layer, contenente il filmato

Codice per il secondo layer, cliccabile e con fondo trasparente

FILES

visualizza l'esempio | scarica l'esempio

Ti consigliamo anche