- Learn
- Guida Flash e JavaScript
- Layer cliccabile
Layer cliccabile
- di negatyve
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
Se vuoi aggiornamenti su Layer cliccabile inserisci la tua email nel box qui sotto:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
La tua iscrizione è andata a buon fine. Se vuoi ricevere informazioni personalizzate compila anche i seguenti campi opzionali:
Compilando il presente form acconsento a ricevere le informazioni relative ai servizi di cui alla presente pagina ai sensi dell'informativa sulla privacy.
I Video di HTML.it
OrientDB, the 2nd generation of (multimodel) NOSQL
In last years NoSQL experienced a huge upward trend, offering new data models (Document, Graph, Key-Value…) to solve problems where […]