Risorse per webmaster

L A   C O M U N I T À   V I R T U A L E   I T A L I A N A   P E R   W E B   M A S T E R S

 
 
      Tecnologie
      HTML
      CSS
      DHTML
      FLASH
      ASP
      PHP
      JSP
      PERL
      XML
      SMIL
      WIRELESS
      PALMARI
      APACHE
      MYSQL
      PICOSQL
 
      Grafica
 
      Servizi
 
      Raccolte
 
      Recensioni
 
      Analisi
 
      Disclaimer

   Per tutti
 
  .: Magazine
  .: Editor
  .: Appunti
  .: Gratis
  .: Scripts
  .: Components
 
   Home page

Partner
Comunicati stampa
Proposte di viaggio
Prenotazione hotel
Prenota vacanze
Accessori palmari
Cerca alberghi
Guide turistiche

versione stampabile Mostra una versione adatta per la stampa  

Livello di difficoltà:Livello di difficoltà: medio  
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.
 

 
 
Home > dhtml > teoria > 2001 > ottobre > ...   © 1999-2017 Risorse.net, tutti i diritti riservati