domenica 24 giugno 2012

Overlay Banner con chiusura a tempo

Vediamo come realizzare un overlay, ovvero un livello sopra i contenuti, con chiusura a tempo.

Esempio


Con un Overlay possiamo facilmente e con poche righe di codice, visualizzare un div contenente testo e foto, o solitamente un banner pubblicitario, che scompare dopo un tempo prestabilito.

Vediamo il codice Java Script

<script type="text/javascript">
function timeout(){
 setTimeout(function(){
  document.getElementById('banner').style.display="none"
 }, 5000);
}
</script>

Un po' di CSS

<style type="text/css">
body {
 margin:0 auto;
}
#content {
 position: absolute;
 height: 70%;
 width: 70%;
 left:15%;
 top:15%;
 text-align:center;
 background: #EAEAEA;
}
#banner {
 position: absolute;
 z-index: 1;
 height: 100%;
 width: 100%;
 background-color: rgba(0, 0, 0, 0.8);
 left:0;
 top:0;
}
#banner img{
 position: absolute;
 left: -234px;
 margin: 50% 0 0 50%;
 top: -30px;
}
</style>

E in fine i contenuti

<body onLoad="timeout()">

<div id="content"><p>Contenuto</p></div>

 <div id="banner">
        <img name="banner" src="" width="468" height="60" alt="Il banner si chiuderà in 5 sec..." style="background-color: #FFCC00">
    </div>
Niente paura a fine guida ho riportato il codice completo dell'esempio.

Spieghiamo

Sfruttiamo SetTimeout del JavaScript, indicando il nome del <div> che contiene il nostro banner, (vedi riga 4 del codice JavaScript).
Il valore che ho preimpostato, 5000, (vedi riga 5 del codice JavaScript) corrisponde a 5 secondi e può essere modificato a piacimento.
A seguire, c'è un po' di CSS che serve a impostare una velina semitrasparente sopra i contenuti, così da far capire all'utente che "sotto c'è qualcosa".
Molto probabilmente il codice CSS andrà ottimizzato in base al sito esistente.

E in fine, un paio di <div>, uno per i contenuti della pagina (vedi riga 3 del codice HTML), l'altro per contenere il banner o quello che vogliamo (vedi riga 5 del codice HTML).

Nota bene

È importante non sottovalutare la riga 1 del codice HTML, dove ho richiamato la funzione JavaScript timeout().
Quella riga richiama e avvia la funzione JavaScript, ed è fondamentale per il funzionamento dell' Overlay.

Tutto il codice dell'Overlay

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OVERLAY</title>

<script type="text/javascript">
function timeout(){
 setTimeout(function(){
  document.getElementById('banner').style.display="none"
 }, 5000);
}
</script>

<style type="text/css">
body {
 margin:0 auto;
}
#content {
 position: absolute;
 height: 70%;
 width: 70%;
 left:15%;
 top:15%;
 text-align:center;
 background: #EAEAEA;
}
#banner {
 position: absolute;
 z-index: 1;
 height: 100%;
 width: 100%;
 background-color: rgba(0, 0, 0, 0.8);
 left:0;
 top:0;
}
#banner img{
 position: absolute;
 left: -234px;
 margin: 50% 0 0 50%;
 top: -30px;
}
</style>
</head>

<body onLoad="timeout()">

<div id="content"><p>Contenuto</p></div>

 <div id="banner">
        <img name="banner" src="" width="468" height="60" alt="Il banner si chiuderà in 5 sec..." style="background-color: #FFCC00">
    </div>


</body>
</html>

8 commenti:

  1. Se lo volessi inserire su blogger?

    RispondiElimina
  2. non ho provato ma credo si possa fare tranquillamente (sulla versione base di blogger), perché nella nuova versione non puoi modificare l'html

    devi cercare: MODELLO > MODIFICA HTML

    RispondiElimina
  3. demo idiota? oppure dovrei provare tutta la spazzatura che trovo§?

    RispondiElimina
  4. Con copia e incolla avresti fatto prima a provare il codice che a scrivere questo post;
    rimane il fatto che puoi fare come credi ;)

    RispondiElimina
  5. Ottimo e se volessi questo script non per la chiusura ma per l'apertura

    RispondiElimina
  6. lo script parte all'apertura della pagina non alla sua chiusura

    RispondiElimina
  7. Salve, avete un esempio di Overlay che si apre una sola volta?
    Ovvero dopo che si lascia la home page non si ripropone ogni volta che ci ritorno?
    grazie

    RispondiElimina
  8. guarda se ti piace questa soluzione offerta da Google (per il discorso accettazione cookie)
    https://www.cookiechoices.org/

    RispondiElimina