INTERNET EXPLORER? Ti consiglio di navigare questo sito con Mozilla Firefox oppure con Google Chrome.

Banner scorrevole in Javascript

Corso Javascript
Impara a creare controlli ed animazioni

Concesso in esclusiva a MrWebmaster.it - E' vietata la pubblicazione senza espresso consenso del proprietario

Un'esigenza comune a tutti coloro che si occupano di pubblicità online è rendere visibili i banner sul proprio sito, il più a lungo possibile, onde avere più chances che i propri utenti ci clicchino.

Un sistema del tutto pulito e molto utilizzato sul Web è quello di far scorrere i banner sulla pagina insieme allo scroll della stessa, in modo che, se un banner si trova in alto, quando l'utente scorre la pagina verso il basso, il banner sarà sempre visibile.

Un esempio illustrato:


Notare la barra di scorrimento.

Il banner utilizzato nell'esempio è di dimensioni standard 120X240. Si consiglia di usare allo scopo banner verticali di dimensioni 120X240, 120X600 o 120X600.

Vediamo come fare. Iniziamo con lo scrivere il codice per il richiamo del banner nella pagina: 
<div id="BannerDIV">
<a href="#"><img src="banner.gif" border="0"></a>
</div>
Notiamo che il banner è contenuto all'interno di un livello di testo con un ID che useremo per generare dinamicamente il nostro effetto banner scorrevole.

Vediamo lo script che genera il dinamismo: 
<script type="text/javascript">
var SB;
function ScrollBanOK()
{
	document.getElementById("BannerDIV").style.position = "absolute";
	document.getElementById("BannerDIV").style.top = document.body.scrollTop;
	document.getElementById("BannerDIV").style.marginTop = "10px";
	document.getElementById("BannerDIV").style.marginLeft = (window.screen.width - 160) + "px";
	SB = window.setTimeout("ScrollBanOK()", 1);
}
function ScrollBanNO()
{
	window.clearTimeout(SB);
}
</script>
Abbiamo due funzioni; la prima fa muovere il banner durante lo scroll di pagina e la seconda lo ferma al termine dello scroll.

All'interno della prima funzione stilizziamo il banner posizionandolo ad una certa distanza dai margini e calcoliamo dinamicamente il posizionamento a destra, adattandolo a qualsiasi risoluzione: 
document.getElementById("BannerDIV").style.marginLeft = (window.screen.width - 160) + "px";
Alla funzione che calcola la larghezza dello schermo sottraiamo 120 pixel del banner, 10 pixel di margine dal bordo e 30 pixeal di barra di scorrimento, arrivando cosi a 160 pixel. Nel caso del formato 160X600, dunque, sottrarremo 200 pixel, e cosi via per eventuali altri formati.

Non finisce qui; dobbiamo richiamare le due funzioni e lo facciamo nel tag <body> agli eventi onload ed onunload, come nel seguente codice: 
<body onload="ScrollBanOK()" onunload="ScrollBanNO()">
Il tutto è già funzionante, ma attualmente nella pagina c'è solo il banner. Per gustare l'effetto, aggiungere un po di: 
<br><br><br><br><br>
dopo il codice del banner.

IN EVIDENZA
Una slidegallery con jQuery Pagamenti online con PayPal e PHP Guadagna col tuo sito grazie a TradeD... Riavviare IIS Effetto ombra su testo con Photoshop Guida XHTML Riscrivere le URL con Asp Generare password casuali in Javascri... Errore 80004005: Cannot update. Datab... Referenze dei Tag Html HTTP 500 internal server error Introduzione ad Ajax ed Asp con Jscri... Breve guida a jQuery Stringhe di connessione via ODBC e Ol... Referenze dei fogli di stile Css Le espressioni regolari in Javascript

HOT LINKS
Corsi online Guadagna col sito Hosting 20 euro Mr.Webmaster PHP&Linux ExtroWebSite gDesign NetFree TutorialWeb Dablones AiutoPC AspCode MorpheusWeb WebIsland WebmasterRisorse PCSelf