Banner espandibile

Arretrati lista "Una demo Dhtml a settimana"
di Risorse.net

CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Javascript

COMPATIBILITÀ: Ms Ie, Netscape, Opera
FILES ESTERNI: sponsor.htm, estensione.gif, banner.gif
Visualizza la demo
Scarica la demo

Pochi giorni fa, all'interno dell'archivio di demo Dhtml, abbiamo aperto la categoria "Soluzioni Pubblicitarie" in cui abbiamo inserito le principali iniziative promozionali che utilizzano la tecnologia Dhtml.
Tra le soluzioni proposte, abbiamo parlato dei banners espandibili, una nuova tendenza del mercato pubblicitario, che analizzeremo in maniera approfondita domani, all'interno del magazine settimanale.
In questo numero della mailing list, vediamo come realizzare un banner espandibile:

<script language="JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if
((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight;
onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH)
location.reload();
}
MM_reloadPage(true);
// -->

function MM_findObj(n, d) { //v4.0
var p,i,x; if(!d) d=document;
if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)
x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++)
x=MM_findObj(n,d.layers[i].document);
if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_showHideLayers() { //v3.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null)
{ v=args[i+2];
if (obj.style) { obj=obj.style;
v=(v=='show')?'visible':(v='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>


Questo è il codice Javascript creato con Macromedia Dreamweaver (come si può vedere dall'aggiunta delle lettere MM alle funzioni). La sintassi appena vista, consente di mostrare o nascondere il layer agli eventi che imposteremo in seguito.

Adesso inseriamo il banner, che al passaggio del mouse dovrà estendersi fino a coprire buona parte della pagina:

<A HREF=sponsor.htm onMouseOver="MM_showHideLayers('banner','','show')" onMouseOut="MM_showHideLayers('banner','','hide')"><IMG SRC=banner.gif WIDTH=468 HEIGHT=60 BORDER=0></A>

All'interno del normale codice per associare un link ad un'immagine, abbiamo aggiunto due eventi: onmouseover e onmouseout. Ovvero, quando il mouse entra ed esce dalla zona del banner. A questi due eventi, abbiamo associato la funzione MM_showHideLayers, che permette di nascondere (hide) e mostrare (show) il layer banner, che contiene appunto l'estensione del richiamo pubblicitario.

Vediamo quindi, come inserire questo layer nascosto:

<div id="banner" style="position:absolute; width:468px; height:400px; z-index:99; left: 8px; top: 68px; background-color: #800000; layer-background-color: #800000; visibility: hidden"> <A HREF=sponsor.htm onMouseOver="MM_showHideLayers('banner','','show')" onMouseOut="MM_showHideLayers('banner','','hide')"><IMG SRC=estensione.gif WIDTH=468 HEIGHT=400 BORDER=0></A> </div>

Il layer, che ha come nome banner, è di default nascosto (visibility: hidden) e viene visualizzato solo quando il mouse passa sopra il 468x60. All'interno del layer, abbiamo inserito una gif, di dimensioni 468x400, che resta visibile finché il mouse non si allontana dal banner, o dalla sua estensione (ecco perché, anche qui troviamo gli eventi onmouseover e onmouseout).

Altri aspetti legati ai banner espandibili, verranno trattati all'interno del Magazine settimanale di domani. A Martedì prossimo!

Per qualsiasi dubbio, puoi scrivere sul Forum di Risorse.net, all'indirizzo www.risorse.net/community/forum

L A   C O M U N I T A `   D I   R I S O R S E . N E T
Per accedere alle sezioni protette di Risorse.net (Forum, Newsgroup, sezione password dell'archivio Dhtml ecc.) devi essere iscritto alla Comunità. L'iscrizione è gratuita e viene garantita la tutela della privacy (675/96). Visita www.risorse.net/community.

© Risorse.net (www.risorse.net)
pagina in versione stampabile:
http://www.risorse.net /dhtml/teoria/2001/ottobre/96.asp?print=ok