Un circuito di rotazione banner in ASP, XML(DOM) e Javascript
Articolo scritto da Luca Ruggiero
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.
(L'articolo continua più sotto...)
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.htmlper gustare il risultato.
