![]() |
Testo scorrevole con Html dinamicoMassimiliano Valente mvalente@tecnet.itVi 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 allinterno di una pagina Web è stato finora possibile con lausilio di applet Java. Purtroppo, linserimento 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. Lesempio comprende quattro file: - banner.htm - bannerconfig.js - banner.js - stile.css - bianco.gif Banner.htmQuesto è il file deputato a ospitare leffetto di scorrimento del testo. Allinterno di esso non va inserita lintera sintassi Javascript, ma un richiamo ai file esterni con estensione .js e .css, oltreché il posizionamento dinamico nella pagina. Questultimo 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;"> Lattributo ID identifica in modo univoco lelemento "holdspace" "WIDTH" e "HEIGHT" che stabiliscono rispettivamente la larghezza e laltezza della finestra entro la quale scorre il testo. "STYLE" posiziona in modo assoluto, secondo le regole dei fogli di stile, la finestra allinterno della pagina, stabilendo le distanze dal margine superiore (top) e sinistro (left). Come accennato, il file .htm non contiene lintero 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 lattributo SRC ignorano il contenuto dellelemento SCRIPT. Al contrario, i file che non supportano lattributo SRC, eseguono come codice il contenuto dellelemento SCRIPT. Stile.cssAnalogamente 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.jsQuesto 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.jsA 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:
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 allinterno del tag <BODY> frameset esterni. Grazie a questa opportunità possiamo creare dentro il nostro documento htm una finestra iframe allinterno 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 allinterno di iframe. Il file esterno deve contenere allinterno 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 allesempio 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. |