Livello di difficoltà: |
|
Dynamic Html è una tecnologia approvata dal W3C per la creazione di siti Web dinamici ed interazioni client side con l'utente. In questa sezione sono disponibili centinaia di esempi ed arretrati della mailing list "Una demo Dhtml a settimana".
|
| |
Banner espandibile
Arretrati lista "Una demo Dhtml a settimana"
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.
|
