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
