Lo script che presentiamo permette di realizzare una scritta scorrevole all'interno di una pagina tramite l'utilizzo dei frame in linea (iframe). Gli iframe infatti ci consentono di posizionare un frame, in un punto qualsiasi di un documento, come fosse un oggetto.
L'esempio si compone di 2 file:
- esempio.htm
- iframecontent.html
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Prima di tutto è necessario impostare i seguenti fogli di stile tra i tag <head> del documento principale:
Fatto questo bisogna inserire, sempre tra gli <head>, il tag che richiama l'iframe da visualizzare e che gli assegna determinate caratteristiche:
Come è facile notare questa stringa di codice richiama l'iframe con il nome "iframecontent.html" e definisce due attributi fondamentali per una perfetta integrazione con il file esempio:
l'iframe non dovrà avere le barre di scorrimento
l'iframe non dovrà avere i bordi.
Impostato il foglio di stile e il tag iframe procediamo inserendo il codice dello script sempre nel documento principale tra i tag <head>:
Vediamo adesso le parti che si possono personalizzare:
indica la larghezza dell' iframe nel documento principale
indica l'altezza dell'iframe nel documento principale
indica la distanza dal margine destro del documento principale in cui si posizionerà l'iframe (in %).
indica la distanza dal margine inferiore del documento principale in cui si posizionerà l'iframe (in %).
indica il tempo che impiegherà l'iframe a posizionarsi nel punto stabilito
(Per capire meglio provare a cambiare questo valore con 50000. Il tempo è espresso in millisecondi).
Il resto del codice non va modificato.
Passiamo adesso al documento che conterrà il testo scorrevole.
Prima di tutto bisogna impostare i fogli di stile tra i tag <head>:
indica la larghezza della finestra scorrevole
indica l'altezza della finestra scorrevole
indica il tipo di font
indica la grandezza del font
indica il colore del testo espresso con valori esadecimali
indica il colore di fondo della finestra scorrevole espresso con valori esadecimali
indica il colore del bordo della finestra scorrevole espresso con valori esadecimali
indica la distanza tra il bordo ed il testo
Per eventuali link all'interno del testo dobbiamo far riferimento a queste variabili:
indica il colore del link
indica lo stile del link
indica il colore del link quando ci si passa sopra con il mouse
indica il colore dello sfondo del link onmouseover
Adesso inseriamo tra gli <head> lo script che gestirà lo scrolling del testo:
indica la velocità di scorrimento del testo
terminato lo scroll, indica quanto tempo deve trascorrere prima che riparta lo scorrimento.
Terminate queste operazioni bisogna inserire tra i tag <body> la stringa di codice che conterrà il testo:
Chiaramente il messaggio può essere personalizzato a piacere.
