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
42 / 44

Visibilità dei layer

I Video di HTML.it