Livello di difficoltà: |
|
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".
|
| |
Scritte in scrolling automatico con links
Arretrati lista "Una demo Dhtml a settimana"
CONOSCENZE CONSIGLIATE PER QUESTO ARTICOLO: Html, Css, Javascript
COMPATIBILITÀ: MsIe, Netscape
FILES ESTERNI: banner.js, bannerconfig.js
Visualizza la demo
Scarica la demo
Vi piacerebbe poter avere dei links che scrollino automaticamente, uno dopo
l'altro? Se la risposta è sì, leggete attentamente il seguente articolo.
Apriamo il file esempio.htm:
<BODY>
<P>L'inizio del documento.</P>
<P><IMG SRC="blank.gif"
NAME="holdspace" ID="holdspace"
WIDTH="400" HEIGHT="21"
STYLE="visibility:hidden; position:relative;"></P>
<P>La fine del documento.</P>
Il file che stiamo esaminando, non ha nulla nell'<head> (a parte il titolo)
e contiene nel <body>, questa prima parte di sorgente, che richiama
un'immagine anche non presente. L'importante è che si attribuisca un ID, un
NAME, la larghezza e l'altezza della gif.
Nella seconda parte del <body>, sono presenti i richiami ai due file esterni con estensione .js
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
if (navigator.appVersion.indexOf("MSIE 4.0; Macintosh;") == -1) {
with (document) {
write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='bannerconfig.js'>");
write("<\/SCRIPT>");
write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='banner.js'>");
write("<\/SCRIPT>");
}
}
// -->
</SCRIPT>
</BODY>
Una volta esaminato esempio.htm, vediamo di aprire il file bannerconfig.js, che contiene i link e le scritte da scrollare:
var NS4 = (document.layers) ? true : false; // l'accesso ai layers per
Netscape4
var IE4 = (document.all) ? true : false; // l'accesso a tutto il documento
per MsIE4
var interval = 20; // intervallo in millisecondi tra un link e l'altro
var increment = 1; // di quanto deve incrementare lo scrolling
var pause = 750; // in millisecondi, il tempo che deve bloccarsi lo
scrolling
var bannerColor = "#ffffcc"; // colore di background
var leftPadding = 3; // distanza in pixel da sinistra
var topPadding = 1; // distanza in pixel dall'alto
Questa prima parte di codice, imposta le variabili per il Javascript; per
personalizzarlo, fai riferimento ai commenti inseriti in italiano preceduti
dai segni //.
Sempre all'interno di bannerconfig.js, si trovano i link che devono
scrollare:
var bannerLeft = (NS4) ? document.images.holdspace.x :
holdspace.offsetLeft;
var bannerTop = (NS4) ? document.images.holdspace.y :
holdspace.offsetTop;
var bannerWidth = (NS4) ? document.images.holdspace.width :
holdspace.width;
var bannerHeight = (NS4) ? document.images.holdspace.height :
holdspace.height;
var ar = new Array(
'<A HREF="/http://computer.digiland.it/1957/">Galileo</A> - <I>Rx #1</I>',
'<A HREF="/http://computer.digiland.it/1957/dhtml/">Dynamic HTML
store</A> - <I>Rx #2</I>',
'<A HREF="/http://computer.digiland.it/1957/mercatino/">Mercatino
Informatico</A> - <I>Rx #3</I>',
'<A HREF="/http://computer.digiland.it/1957/">100 demo</A> - <I>Rx
#4</I>',
'<A HREF="/http://computer.digiland.it/1957/">Mailing list</A> - <I>Rx
#5</I>',
'<A HREF="/http://computer.digiland.it/1957/">Magazine</A> - <I>Rx
#6</I>',
'<A HREF="/http://computer.digiland.it/1957/">tutto cio che vuoi</A> -
<I>Rx #7</I>',
'<A HREF="/http://computer.digiland.it/1957/">quando vuoi</A> - <I>Rx
#8</I>',
'<A HREF="/http://computer.digiland.it/1957/">come vuoi</A> - <I>Rx
#9</I>',
'<A HREF="/http://computer.digiland.it/1957/">se lo vuoi</A> - <I>Rx
#10</I>',
'<A HREF="/http://computer.digiland.it/1957/">clicca su Galileo</A> -
<I>Rx #11</I>',
'<A HREF="/http://computer.digiland.it/1957/">scegli il futuro</A> - <I>Rx
#12</I>'
);
Qui sono impostate le variabili per la dimensione del bannerino per
Netscape, e i links richiamati all'interno dell'Array (se non sai cos'è, visita la guida a Javascript).
L'ultimo file, banner.js, contiene i movimenti in Javascript per la demo.
|
