Un circuito di rotazione banner in ASP, XML(DOM) e Javascript

Home + Articoli + Banner e Advertising + Articolo # 141

Concesso in esclusiva a Mr.Webmaster. Vietata la riproduzione.

In questo articolo vedremo come realizzare un semplice sistema di rotazione banner mescolando un po di linguaggi: XML che ospita i dati relativi alle immagini ed ai relativi link, ASP come linguaggio lato server per l'interfaccia con XMLDOM che, a sua volta, accede alla struttura XML, e Javascript per l'esposizione locale o remota dei dati in qualsiasi tipo di file (anche semplici file HTML).

Vediamo un esempio pratico. Si crei la cartella banner sul proprio server Web.

Iniziamo con la struttura del file XML contenuta nel file banner.xml:

<?xml version="1.0" encoding="ISO-8859-1"?>
<banner>
    <spot>
        <immagine>mrwcorsi.gif</immagine>
        <collegamento>http://www.mrwcorsi.it</collegamento>
    </spot>
    <spot>
        <immagine>mrwebmaster.gif</immagine>
        <collegamento>http://www.mrwebmaster.it</collegamento>
    </spot>
</banner>

Una semplice struttura che specifica l'immagine rappresentante il banner ed il collegamento associato alla URL del sito da sponsorizzare.

Passiamo al codice ASP e Javascript; si crei il file banner.asp e lo si corredi del seguente codice, opportunamente commentato:

<%@LANGUAGE = VBScript%>
<%
    ' Intestazioni della pagina
    Option Explicit
    On Error Resume Next

    ' Dichiarazione delle variabili
    Dim xmldom, imm, col, cas

    ' Impostazioni dell'oggetto XMLDOM e caricamento del file XML
    Set xmldom = Server.CreateObject("Microsoft.XMLDOM")
    xmldom.Async = False
    xmldom.Load Server.MapPath("banner.xml")

    ' Caricamento dei nodi XML
    Set imm = xmldom.getElementsByTagName("spot/immagine")
    Set col = xmldom.getElementsByTagName("spot/collegamento")

    ' Restituzione di un numero casuale legato alla struttura XML
    Randomize()
    cas = CInt(Rnd() * (imm.length - 1))
%>

// Codice Javascript per la costruzione dinamica del banner
function Banner(url)
{
    window.open(url);
}
with (document)
{
    write("<%="<img id=BANNER src=" & imm(cas).Text & " "%>");
    write("<%="onclick=Banner('" & col(cas).Text & "')>"%>");
}
document.getElementById("BANNER").style.cursor = "pointer";

<%
    ' Un po di pulizia...
    Set immagine = Nothing
    Set collegamento = Nothing
    Set xmldom = Nothing
%>

In fine si utilizzi il seguente codice nelle pagine in cui si desidera richiamare il banner:

<script type="text/javascript" src="banner.asp"></script>

Si lanci il proprio browser all'indirizzo:

http://localhost/banner/banner.html

per gustare il risultato.

Iscriviti
Cancellati