Per fare un testo scorrevole (scroller) con JavaScript bisogna sapere dove questa venga poi posizionata.
Vi sono 3 alternative: nella barra di stato (window.status), in un campo di un form oppure con la proprietà innerHTML per esempio all’interno del testo (quest’ultimo non funziona con Netscape Navigator 4.x).
Questo e’ lo script che va inserito nel tag head del documento html:
<script language="javascript"><!--
var scroll = " *** TESTO SCORREVOLE *** ";
function scrolling() {
scroll = scroll.substring(1, scroll.length) + scroll.substring(0, 1);
document.form_scroll.scroll_txt.value = scroll;
setTimeout("scrolling()", 150);
}
//--></script>
La seguente istruzione nel tag body carica lo script:
<body onload="scrolling()">
Questa form si introduce nella tag body del documento html:
<form name="form_scroll">
<input type="text" name="scroll_txt" size="30" style="font-family: Courier, monospace; text-align: right">
</form>
Per allargare o restringere il campo del testo scorrevole si modifica size.
Testo scorrevole con JavaScript, tabella e CSS
Di seguito un altro script con una tabella ed un po’ di CSS. Il newsticker (testo scorrevole) ha un bordino nero ed un file di sfondo che deve avere le stesse dimensioni del testo scorrevole.
Il codice sorgente della tabella nel form:
<form name="ticker">
<table border="0" cellpadding="0" cellspacing="0" background="image_bgr.jpg" style="width: 289px; height: 177px; border: 1px solid black;">
<tr><td colspan="2" height="48"></td></tr>
<tr><td><span style="width: 17px"> </span></td><td>
<input type="text" name="ticker" style="border: 1px solid black; background-image:url(image_ticker.jpg); color: black; width: 250px">
</td></tr></table>
</form>
Con questa riga CSS si sono definiti l’immagine di sfondo ed il bordo:
<input type="text" name="ticker" style="border: 1px solid black; background-image:url(image_ticker.jpg); color: black; width: 250px">
Per ravvivare la scritta scorrevole ci vuole un po’ di JavaScript. Si introducono le seguenti righe nel tag head del documento html:
<script language="javascript">
var testo_scorrevole = " Ordina ora i nuovi prodotti naturali +++ Prodotti naturali a base di +++ Conoscete il nuovo prodotto? +++ ";
var start = 0;
var stop = testo_scorrevole.length;
function testo_scorrevole_txt() {
document.ticker.ticker.value = "" + testo_scorrevole.substring(start,stop) + " " + testo_scorrevole.substring(0,start);
start++;
if(start >= stop) { start = 0; }
setTimeout("testo_scorrevole_txt()", 120);
}
</script>
La seguente istruzione nel tag body carica lo script:
<body onload="testo_scorrevole_txt()">