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>