Testo scorrevole con Html dinamico
Massimiliano Valente – mvalente@tecnet.it
Vi piacerebbe realizzare la vostra pagina Web con il testo che scorre come i titoli di coda di un film senza dover utilizzare "pesanti" applet java? Vi spieghiamo come riuscirci attraverso alcuni esempi sui quali potrete lavorare. E una volta realizzato il codice vi garantiamo la totale compatibilitα con Netscape 4 e MS Internet Explorer 4
Inserire testo scorrevole in sequenza verticale o orizzontale all’interno di una pagina Web Φ stato finora possibile con l’ausilio di applet Java. Purtroppo, l’inserimento di applicazioni Java rallenta notevolmente il caricamento della pagina. Da ci≥ consegue una certa diffidenza da parte degli sviluppatori che spesso preferiscono rinunciare a un effetto sostanzialmente estetico e non funzionale. A onor del vero, anche Javascript consente un effetto simile, sfruttando la propria sintassi e le proprietα delle form Html:
<HEAD>
<script language="JavaScript"><!-- var id,pause=0,position=0;function scorrevole() {var i,k,msg=" Internet News, la prima e pi∙ autorevole rivista sulla Rete ";
k=(100/msg.length)+1;for(i=0;i<=k;i++) msg+=" "+msg;document.form2.scorrevole.value=msg.substring(position,position+100);if(position++==100) position=0;id=setTimeout("scorrevole()",100); }//-->
</script></HEAD><body onload="scorrevole()"><form name=form2><input type="text" name="scorrevole" size="40">
</form>
Questo esempio ha evidenti limiti di ordine estetico, sui quali potremmo sorvolare, e di ordine tecnico, dai quali non possiamo prescindere. Riguardo questi ultimi Φ doveroso sottolineare, infatti, come il codice script esaminato sfrutti in modo obsoleto il modello a oggetti, accedendo soltanto a una limitata porzione degli elementi. In altre parole il codice preso in esame non sfrutta le innovazioni introdotte dal DOM (Document Object Model) di Internet Explorer 4, che al contrario della rivale Netscape, prevede un oggetto "all"; esso consente agli eventi di accedere a tutti gli elementi del documento.
In questo articolo, quindi, presentiamo un esempio in Html dinamico che genera lo scorrimento verticale di testo, sul modello, per intenderci, dei titoli di coda di un film. Θ garantita la totale compatibilitα con Netscape 4 e MS Internet Explorer 4. L’esempio comprende quattro file:
- banner.htm
- bannerconfig.js
- banner.js
- stile.css
- bianco.gif
Banner.htm
Questo Φ il file deputato a ospitare l’effetto di scorrimento del testo. All’interno di esso non va inserita l’intera sintassi Javascript, ma un richiamo ai file esterni con estensione .js e .css, oltrechΘ il posizionamento dinamico nella pagina. Quest’ultimo si realizza attraverso il codice:
<IMG SRC="bianco.gif" NAME="holdspace" ID="holdspace" WIDTH="200" HEIGHT="150"
STYLE="visibility:hidden; position:absolute; top:150px; left:200px;">
L’attributo ID identifica in modo univoco l’elemento "holdspace" "WIDTH" e "HEIGHT" che stabiliscono rispettivamente la larghezza e l’altezza della finestra entro la quale scorre il testo. "STYLE" posiziona in modo assoluto, secondo le regole dei fogli di stile, la finestra all’interno della pagina, stabilendo le distanze dal margine superiore (top) e sinistro (left). Come accennato, il file .htm non contiene l’intero codice Javascript che, per maggior ordine e semplicitα, Φ contenuto in due file esterni con estensione .js, mentre i fogli di stile sono stati raccolti in un altro file con estensione .css. I file con estensione .js vengono richiamati con il codice contenuto alla fine del documento htm, in posizione immediatamente precedente la chiusura del tag </BODY>:
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
{
with (document) {
write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='bannerconfig.js'>");
write("<\/SCRIPT>");
write("<SCRIPT LANGUAGE='JavaScript1.2' SRC='banner.js'>");
write("<\/SCRIPT>");
}
}
//-->
</SCRIPT>
La possibilitα di includere il codice Javascript in file esterni Φ prevista dalle nuove specifiche di HTML 4.0, ed Φ attualmente supportata da Navigator 3 e 4, e da Internet Explorer 4. Il vantaggio pi∙ evidente di questa nuova funzionalitα Φ quello di poter scrivere librerie di script condivisibili da pi∙ file htm. In altre parole, uno script usato da diversi documenti non deve pi∙ essere scritto in ogni pagina. In questo modo si realizza una netta separazione tra contenuti e presentazione, con un guadagno in termini di funzionalitα e tempo. Se, infatti, si vuole modificare il contenuto dello script, sarα sufficiente agire sul solo file esterno, lasciando inalterati i singoli documenti. Oltretutto il file esterno viene caricato nella cache del browser e richiamato a ogni nuova pagina, velocizzando in questo modo il suo caricamento. I browser che supportano l’attributo SRC ignorano il contenuto dell’elemento SCRIPT. Al contrario, i file che non supportano l’attributo SRC, eseguono come codice il contenuto dell’elemento SCRIPT.
Stile.css
Analogamente a quanto avviene con il codice Javascript, anche un foglio di stile pu≥ essere allegato a un documento esterno. Ci≥ si realizza attraverso la creazione di un file con estensione .css contenente gli elementi tipici di un foglio di stile. Il richiamo all'interno della pagina Html, avviene con una semplice riga di codice inserita tra i tag <HEAD>:
<link rel=stylesheet href="stile.css" type="text/css">
Nel nostro esempio il foglio di stile collegato contiene il seguente codice:
A:link, A:visited { text-decoration: none }
A:hover { text-decoration: underline }
P {font-family:arial; font-style:normal; text-align:center; font-size:24px; font-weight:bold;}
H1 {font-family:arial; font-style:normal; text-align:center; font-size:14px; color:red;}
H2 {font-family:arial; font-style:normal; text-align:center; font-size:14px;}
H3 {font-family:arial; font-style:normal; text-align:center; font-size:16px;}
La prima riga di codice stabilisce che i link da visitare e giα visitati non abbiano la sottolineatura tipica dei collegamenti ipertestuali. La seconda, invece, prevede che essa appaia quando il puntatore del mouse passa sul collegamento. Le righe successive si riferiscono alla formattazione e giustificazione del testo.
Bannerconfig.js
Questo file, come del resto intuibile dal nome, configura le diverse opzioni relative allo scorrimento del testo, nonchΘ al contenuto dello stesso. Il codice:
var NS4 = (document.layers) ? true : false;
var IE4 = (document.all) ? true : false;
determina quali browser possano accedere al documento, e restituisce il valore "true" o "false". Come precedentemente accennato, questa demo Φ compatibile con Navigator 4 (NS4) e Internet Explorer 4 (IE4).
Il codice script che segue immediatamente il controllo dei browser, Φ quello che determina le opzioni di visualizzazione del testo:
var interval = 10;
determina la sua velocitα di scorrimento. A valori pi∙ bassi corrisponde una velocitα di scorrimento pi∙ elevata.
var increment = 1;
Questo codice incrementa il dato precedente, moltiplicandolo per il suo valore. A un aumento del valore, diminuisce la velocitα di scorrimento del testo.
var pause = 1000;
Il dato 1000 si riferisce alla pausa di visualizzazione, espressa in millisecondi, del testo. Ovviamente, a valori pi∙ alti fa riscontro un maggior tempo di visualizzazione.
var bannerColor = "#FFFF80";
Il codice soprastante fa riferimento al colore di background espresso in valori alfanumerici. Nell'esempio presentato il colore impostato Φ il giallo; se non si desidera ottenere tonalitα particolari si possono inserire i colori nella forma letterale (red, white, yellow ecc.).
var leftPadding = 3;
var topPadding = 30;
I valori indicati stabiliscono rispettivamente: la distanza in pixel dal margine destro e superiore della finestra deputata alla visualizzazione del testo (impostata nel file htm con le misure: WIDTH="200" HEIGHT="150").
Il codice contenuto all'interno dell'oggetto array, stabilisce il testo da visualizzarsi nell'esempio:
var ar = new Array(
"<p>Esempio per i lettori di <BR>Internet News",
"<H1>Questa demo in DHTML permette di creare testo scorrevole senza l'uso di applet Java</H1>",
"<H2>È possibile inserire link a risorse esterne come questo<BR><A class=newslink HREF='http://inews.tecnet.it'>http://inews.tecnet.it</A></H2>",
"<H1>Questa demo Φ facilmente configurabile. Puoi cambiare la velocitα di visualizzazione e di scorrimento modificando i file allegati</H1>",
"<H3>Questa demo Φ crossbrowser, cioΦ compatibile con<BR><A class=newslink HREF='http://www.netscape.com'>Netscape 4</A> e <BR><A class=newslink HREF='http://www.microsoft.com'>Internet Explorer 4</A></H3>"
);
Come si evince dal codice, l'inserimento di link Φ possibile grazie al tag <A class=newslink HREF='http://inews.tecnet.it'></A>. PerchΘ il codice funzioni correttamente non Φ possibile inserire testo che contenga apici doppi. Per aggiungere un'altra schermata di testo Φ sufficiente scrivere altro codice all'interno di "", facendo attenzione a che l'ultimo gruppo si chiuda senza la virgola finale.
Banner.js
A differenza di quelli finora esaminati, questo file non Φ personalizzabile; di conseguenza il suo codice non va alterato. Il suo ruolo Φ determinante ai fini del corretto funzionamento della demo, e consiste nella:
- assegnazione del codice necessario alle variabili;
- definizione degli elementi principali e "child" delle proprietα;
- creazione degli elementi principali e child dell’elemento "banner".
Un effetto simile a quello finora descritto si pu≥ ottenere in altro modo, ma limitatamente a Internet Explorer 4. La demo che segue, infatti, utilizza le nuove specifiche dei frame in linea supportate esclusivamente dal browser di Redmond. I frame in linea, previsti ufficialmente da HTML 4.0, consentono di annidare all’interno del tag <BODY> frameset esterni. Grazie a questa opportunitα possiamo creare dentro il nostro documento htm una finestra iframe all’interno della quale visualizzare un file esterno. Ci≥ avviene nel seguente modo:
<IFRAME src="file_esterno.htm" name="iframe" frameborder=0 scrolling=no width=251 height=173 align=middle></IFRAME>
Come si pu≥ notare, iframe segue le regole tipiche dei frame Html. In questo caso abbiamo eliminato lo scroller di pagina e reso invisibile il bordo. Un altro documento di nome "file_esterno.htm" viene creato, e successivamente visualizzato all’interno di iframe. Il file esterno deve contenere all’interno del tag <HEAD> il seguente codice:
<SCRIPT LANGUAGE="JavaScript">
var tScroll;
var curPos = 0;
function runTimer() {
curPos = document.body.scrollTop + 3;
window.scroll(0, curPos);
if (curPos > document.body.scrollHeight -
document.body.clientHeight)
window.scroll(0, 0);
tScroll = window.setTimeout("runTimer();", 100);
}
window.onload = runTimer;
window.onunload = new Function("clearTimeout(tScroll)");
</SCRIPT>
La velocitα di scorrimento della pagina Φ regolata dal valore window.setTimeout("runTimer();", 100) ed Φ espressa in millisecondi. Se la pagina dovesse contenere uno sfondo complesso, come, per esempio, un'immagine, vi consigliamo di rendere fisso il background di pagina con il tag:
<BODY bgproperties="fixed">
Rispetto all’esempio precedente, iframe risulta di pi∙ agevole impostazione e comprensione. I suoi limiti maggiori sono rappresentati dall'incompatibilitα con Netscape, e dalla necessitα di richiamare file html esterni; aspetto, quest'ultimo, che vanifica uno dei punti qualificanti di Html dinamico: la diminuzione del numero di passaggi dal lato server a quello client.