Premetto che non sono mai stato d'accordo con una pubblicità troppo invasiva ma lo script che presentiamo, se usato con accortezza, potrebbe diventare un buon metodo sia per i propri banner ma anche per porre l'attenzione su messaggi di una certa importanza.
Il visitatore, prima di poter entrare nel nostro sito, sarà "costretto" a visualizzare una tabella che copre tutta la pagina all'interno della quale potremo mettere ciò che più ci piace: una pubblicità, una news, una richiesta.
Questa tabella potrà scomparire per mano dell'utente (con un link) oppure dopo un periodo di tempo.
La particolarità dello script sta nel fatto che il codice, grazie ad un cookie, verrà visualizzato solo una volta per ogni sessione e quindi, anche ricaricando la stessa pagina, vedremo il codice in azione solo una volta.
Lo script è compatibile con Explorer 5.x e con Netscape 6.x mentre con Navigator 4.x non verrà visualizzato nulla se non la pagina normale del nostro sito.
L'esempio si compone di 3 file:
- esempio.htm
- banner.gif
- grille.gif
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Supponiamo di voler inserire il codice nella index del nostro sito. Non dovremo apportare sostanziali modifiche alla pagina base se non aggiungere questo codice poco prima del tag </body>
<div id=pub style="position:absolute;top:0;left:0;z-index:10"></div>
<script type="text/javascript" language="javascript">
function showsup()
{
if(document.getElementById && ScanCookie("megabanner")==0)
{
document.getElementById("pub").style.width = larg;
document.getElementById("pub").style.height = haut;
document.getElementById("pub").innerHTML = html_haut+html_mil+html_bas;
setTimeout("closeSup()",30000);
CreationCookie("megabanner",false);
}
}
function closeSup()
{
if(document.getElementById)
{
document.getElementById("pub").style.width = 1;
document.getElementById("pub").style.height = 1;
document.getElementById("pub").innerHTML = '';
}
}
function ScanCookie(variable)
{
cook = document.cookie;
variable += "=";
place = cook.indexOf(variable,0);
if (place <= -1)
return("0");
else
{
end = cook.indexOf(";",place)
if (end <= -1)
return(unescape(cook.substring(place+variable.length,cook.length)));
else
return(unescape(cook.substring(place+variable.length,end)));
}
}
function CreationCookie(nom,valeur,permanent)
{
if(permanent)
{
dateExp = new Date(1990,11,11);
dateExp = dateExp.toGMTString();
ifpermanent = '; expires=' + dateExp + ';';
}
else
ifpermanent = '';
document.cookie = nom + '=' + escape(valeur) + ifpermanent;
}
if(document.all)
{
larg = document.body.clientwidth;
haut = document.body.clientheight;
}
else
{
larg = screen.width;
haut = screen.height;
}
html_haut = "<TABLE width="+larg+" height="+haut+"><TR><td
VALIGN=middle align="center" BACKGROUND=grille.gif>";
html_bas = "</td></TR></table>";
html_mil = "<TABLE width=500 height=350 CELLPADDING=0 CELLSPACING=0
bgcolor=white class=tabella>";
html_mil += "<TR>";
html_mil += "<td align="center">";
html_mil += "<font face=verdana size=5 color=black><strong>Questo è un
messaggio molto importante ";
html_mil += "Clicca sul banner per entrare nel sito</strong></font><br
/>";
html_mil += "<a href=# onClick="closeSup();return(false)"><img
src="banner.gif" border="0"/></a>";
html_mil += "</td>";
html_mil += "</TR>";
html_mil += "</table>";
window.onload = showsup;
</script>
Vediamo cosa personalizzare:
setTimeout("closeSup()",30000);
la tabella che inibisce l'accesso al sito può essere chiusa dall'utente oppure, automaticamente, dopo un determinato periodo di tempo. cambiamo il valore '30000' (millisecondi) con il nuemero desiderato (ricordo che 1000 millisecondi = 1 secondo).
Se invece non vogliamo far chiudere automaticamente la tabella basterà commentare la riga appena analizzata con due slash:
//settimeout("closesup()",30000); html_haut = "<table width="+larg+" height="+haut+">
<tr>
<td valign=middle align="center" background=grille.gif>";
html_bas = "</td>
</tr>
</table>";
L'effetto "griglia" (che permette di intravedere i contenuti della pagina) è ottenuto grazie ad una tabella grande quanto lo schermo che ha come sfondo una semplice gif. In questo caso abbiamo come background "grille.gif". Queste due righe di codice non hanno bisogno di personalizzazione se non per l'immagine di sfondo che potete cambiare a piacere.
html_mil = "<table width=500 height=350 cellpadding=0 cellspacing=0 bgcolor=white class=tabella>";
html_mil += "<tr>";
html_mil += "<td align="center">";
html_mil += "<font face=verdana size=5 color=black><strong>questo è un messaggio molto importante ";
html_mil += "clicca sul banner per entrare nel sito</strong></font><br />";
html_mil += "<a href=# onclick="closesup();return(false)"><img src="banner.gif" border="0"/></a>";
html_mil += "</td>";
html_mil += "</tr>";
html_mil += "</table>";
All'interno della grande tabella con lo sfondo a griglia abbiamo una tabella più piccola che contiene gli elementi che abbiamo deciso di pubblicizzare.
Questa seconda tabella è rappresentata dal codice appena visto e può essere modificata a piacere.
Come vedete si tratta di dividere il normale codice Html in righe separate e di inserirle all'interno della stringa
"html_mil"
Per maggiore chiarezza facciamo un esempio. Supponiamo di avere questo semplice codice e di volerlo inserire all'interno dello script
<div align="center">
<font color="black">
Ciao, come stai?
</font>
</div>
Ecco come andrà impostato all'interno della stringa "html_mil"
html_mil = "<div align="center">";
html_mil += "<font color="black">";
html_mil += "Ciao, come stai?";
html_mil += "</font>";
html_mil += "</div>";
Da notare i backslash () necessari per i doppi apici all'interno della stringa ed inoltre dovremo stare attenti a non inserire il segno più (+) nella prima riga.
Prima di concludere una considerazione: sarebbe buona norma lasciare la possibilità all'utente di chiudere il banner se non desidera cliccarlo. Per fare ciò basta inserire una riga simile a questa:
html_mil += "<a href=# onClick="closeSup();return(false)">Entra direttamente nel sito</a>";
Altre modifiche non sono necessarie.
