Uno script per gli amanti degli effetti speciali sul testo quello di questa settimana. Si tratta di una semplice implementazione di testo scrorrevole da posizionare nel corpo della pagina invece che sulla barra di stato. L'effetto è ottenuto con una combinazione di DOM e dei classici metodi Javascript per gestire la posizione dinamica. A differenza di molti altri esempi dello stesso tipo, lo script utilizza un semplice div per la visualizzazione del testo, cosa che rende estremamente semplice personalizzare l'aspetto in modo da adeguarlo al look and feel della pagina. Il tutto può essere ottenuto grazie ai CSS, come vedremo in seguito.
Lo script si compone di una sezione JavaScript, e di un richiamo all'interno delle pagine Web.
- esempio.htm
## 1: LA SEZIONE JAVASCRIPT
La sezione Javascript contiene il codice della funzione principale ('ScrollMessagè) e una serie di variabili da personalizzare. Iniziamo proprio con queste ultime.
All'inizio dello script definiamo la variabile 'msg'. Contiene, tra virgolette, il testo scorrevole da mostrare. Se il testo è lungo, è opportuno spezzarlo in due o più parti, andando a 'sommarè le due parti con l'operatore di somma e assegnamento +=. Ecco il codice:
msg = "Esempio di testo scorrevole posizionato ";
msg += "nel corpo della pagina. ";
La varibile 'pos', settata su 0, può essere lasciata intatta.
Segue la funzione. Si inizia con la variabile 'newtext', cui associamo il messaggio da visualizzare. Quindi, con il metodo DOM document.getElementById, andiamo a rintracciare il div contenuto nella sezione HTML al quale è stato assegnato l'id 'scroll'. Nel caso in cui si usi un altro nome nel codice HTML, bisognerà di conseguenza modificare anche l'indicazione nella sezione Javascript.
Sempre con un metodo DOM ('div.firstChild.nodeValue = newtext;') assegniamo il valore del messaggio prima definito come testo del div. Dal momento che il metodo effettua una sorta di sostituzione del testo, è fondamentale assegnare al div un testo iniziale predefinito (lo vedremo più avanti).
Per finire, si imposta la velocità di scorrimento attraverso il parametro numerico dell'espressione 'window.SetTimeout'. Nel nostro caso il valore è 150. Ricordiamo che diminuendo il valore, aumenta la velocità di scorrimento.
## 2: RICHIAMO INTERNO ALLA PAGINA WEB
Nella pagina HTML, troviamo due punti interessanti da osservare. Per prima cosa, è necessario attivare la funzione 'ScrollMessagè. Lo facciamo con l'evento onLoad collegato all'elemento body:
<body onLoad="ScrollMessage();">
La funzione viene così eseguita al caricamento della pagina.
Nel corpo della pagina abbiamo quindi definito un semplice div:
<div id="scroll">Testo iniziale</div>
Si osservi, oltre all'assegnazione dell'id ('scroll'), la presenza del testo iniziale predefinito, la cui funzione abbiamo spiegato in precedenza.
Un'ultima osservazione. Nella sezione <head> della pagina, abbiamo impostato una semplice regola CSS per formattare l'aspetto del div:
<style type="text/css">
#scroll {
background: #000;
color: red;
height: 20px;
padding: 5px;
}
</style>
Valga come esempio minimo delle infinite possibilità di personalizzazione.
