Elucubrato da saibal
Addì 24 giugno 2010

Headerbanner con jQuery per le campagne pubblicitarie
Link utili:
- Overlayer con jQuery per le campagne pubblicitarie
- Footerbanner con jQuery per le campagne pubblicitarie
link interno
link esterno
L’headerbanner è uno strumento di advertising basato su un div posizionato staticamente in cima alla pagina. Questa versione è basata su jquery e richiede il plugin jquery.cookie come requisito primario. L’implementazione è semplice e non richiede più di qualche minuto per la personalizzazione.
E’ possibile visualizzare la demo dello script in questa pagina.
Prima di tutto apriamo il file jquery.headerbanner.js e modifichiamo le variabili principali:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
/****************************/ /* CONFIGURATION */ /****************************/ var fb_defaults = { hb_pagesdir : 'http://www.sito.it/advertising/jquery.headerbanner', hb_cssurl : 'http://www.sito.it/advertising/jquery.headerbanner/css', hb_imgdir : 'http://www.sito.it/advertising/jquery.headerbanner/img', hb_closetime : '30 sec', hb_cookielife : '20 min', hb_advpage : 'headerbanner.htm', hb_advwidth : '99.9%', hb_advheight : '60px', hb_id : 'hb', hb_fadefx : 'y', hb_speedfx : 'fast', hb_showborder : 'y', hb_closebutton : 'y', hb_maindomain : 'n', hb_alignment : 'c', hb_mbottom : '0', hb_imgname : 'hb_close.png', hb_maxscreen_w : '800' }; // set array to hide (visibility=hidden) some elements which may contain flash stuff hb_hide_elem = new Array(); // set array to hide (display=none) some elements which may contain flash stuff hb_none_elem = new Array(); // set main domain if you have some subdomains in the same site hb_site_cookname = new Array(); /****************************/ /* END CONFIGURATION */ /****************************/
Analizziamo ogni singolo parametro:
-
hb_pagesdir
Indica l’URL assoluto che porta alla cartella in cui avete caricato i file dell’headerbanner. Nessuno slash finale.
-
hb_cssurl
Indica l’URL assoluto alla cartella in cui sono contenuti i fogli di stile. Nessuno slash finale.
-
hb_imgdir
Indica l’URL assoluto alla cartella in cui è contenuta l’immagine del bottone di chiusura. Nessuno slash finale.
-
hb_closetime
E’ il tempo di chiusura automatica dell’headerbanner. Sono ammesse le seguenti unità di tempo: “sec“, “min“, “hou“, “day” rispettivamente per secondi, minuti, ore e giorni. Es.: “30 sec”.
-
hb_cookielife
E’ il tempo che deve intercorrere tra una visualizzazione e l’altra dell’headerbanner. Sono ammesse le seguenti unità di tempo: “sec“, “min“, “hou“, “day” rispettivamente per secondi, minuti, ore e giorni. Es.: “20 min”.
-
hb_advpage
E’ la pagina (html, php, asp, etc) contenente il codice della campagna advertising. Deve essere posizionata nella cartella definita precedentemente da “hb_pagesdir“.
-
hb_advwidth
Indica la lunghezza che dovrà avere l’headerbanner. E’ necessario includere l’unità di misura come ad esempio ‘%’ o ‘px’. Se esprimete la lunghezza in percentuale consiglio di non inserire 100% ma 99.9%. Questo per evitare la comparsa di scrollbar orizzontali con alcuni browser (a meno che non impostiate una regola css specifica per l’overflow ovviamente.)
-
hb_advheight
Indica l’altezza che dovrà avere l’headerbanner. E’ necessario includere l’unità di misura. Ad esempio % o px.
-
hb_id
E’ un prefisso identificativo del cookie. Se viene utilizzato un headerbanner alla volta basta lasciarlo così altrimenti è necessario personalizzarlo ad ogni chiamata. Successivamente verrà spiegato come fare.
-
hb_fadefx
Se impostato su “y” verrà visualizzato un effetto “fade” sull’headerbanner. L’alternativa è “n”.
-
hb_speedfx
Se viene attivato l’effetto “fade” potete scegliere la velocità di esecuzione. Possibili parametri: “slow” e “fast”.
-
hb_showborder
Mostra o meno un bordo intorno all’headerbanner. Possibili parametri: “y” e “n”.
-
hb_maindomain
Normalmente dovrebbe essere lasciato su “n”. Viene impostato su “y” quando è necessario visualizzare lo stesso headerbanner su siti di terzo livello appartenenti allo stesso dominio.
Un esempio chiarirà meglio la situazione. Si supponga di avere http://www.sito.it e http://terzo.sito.it. Impostando la variabile su “n” ed inserendo un headerbanner in ciascuno dei due siti, al primo caricamento l’utente vedrà entrambi gli annunci senza che il cookie del primo influenzi la visualizzazione del secondo. Viceversa mettendo la variabile su “y”, il cookie dato all’utente al caricamento del primo annuncio varrà anche per il secondo sito. -
hb_alignment
Indica l’allineamento dell’headerbanner. Se la lunghezza non raggiunge il totale della pagina possiamo decidere l’allineamento a sinistra piuttosto che centrato. Possibili valori “c” oppure “l”.
-
hb_mbottom
Permette di impostare un margine inferiore all’headerbanner. Vanno inseriti solo numeri senza unità di misura. Di norma può essere lasciato a zero.
-
hb_imgname
Indica il nome dell’immagine per il bottone di chiusura. L’immagine viene cercata all’interno del percorso impostato con la variabile “hb_imgdir”.
-
hb_maxscreen_w
Indica la lunghezza minima che deve avere la risoluzione dell’utente per poter visualizzare l’headerbanner. Supponiamo di impostare un valore pari a 800. Tutti i browser con risoluzione dello schermo inferiore a questo valore non vedranno la campagna pubblicitaria. Inserire solo numeri senza unità di misura!
Lascia un Commento