Spesso ci siamo soffermati sulla possibilità di ravvivare il testo delle pagine HTML con accattivanti effetti di visualizzazione.
Questa settimana torniamo sull'argomento con uno script che visualizza testo in progressione come avviene solitamente per le vecchie macchine da scrivere. È possibile inserire diverse frasi visualizzate separatamente e modificare a piacimento il testo.
L'esempio si compone di 1 file:
- esempio.htm
Per una più semplice comprensione del presente script fai continuamente riferimento al file sopracitato, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Il codice che permette il funzionamento di questo script va inserito totalmente nel corpo del documento e non, come avviene solitamente, nell'head dello stesso.
Questo il codice da copiare/incollare:
<script language="JavaScript1.2">
<!--
var line=new Array()
line[1]="HTML.it"
line[2]="il sito italiano sul Web publishing"
line[3]="400 applet Java"
line[4]="300 Javascript e molto altro"
line[5]="www.html.it"
var ts_fontsize="16px"
var longestmessage=1
for (i=2;i<line.length;i++){
if (line[i].length>line[longestmessage].length)
longestmessage=i
}
var tscroller_width=line[longestmessage].length
lines=line.length-1
if (document.all||document.getElementById){
document.write('<form name="bannerform">')
document.write('<input type="text" name="banner" size="'+tscroller_width+'"')
document.write(' style="background-color: '+document.bgColor+'; color:
'+document.body.text+'; font-family: verdana; font-size: '+ts_fontsize+'; font-weight:bold; border: medium none" onfocus="blur()">')
document.write('</form>')
}
temp=""
nextchar=-1;
nextline=1;
cursor=""
function animate(){
if (temp==line[nextline] & temp.length==line[nextline].length &
nextline!=lines){
nextline++;
nextchar=-1;
document.bannerform.banner.value=temp;
temp="";
setTimeout("nextstep()",1000)}
else if (nextline==lines & temp==line[nextline] &
temp.length==line[nextline].length){
nextline=1;
nextchar=-1;
document.bannerform.banner.value=temp;
temp="";
setTimeout("nextstep()",1000)}
else{
nextstep()}}
function nextstep(){
if (cursor==""){
cursor="|"}
else if (cursor=="|"){
cursor="/"}
else if (cursor=="/"){
cursor="-"}
else if (cursor=="-"){
cursor=""}
nextchar++;
temp+=line[nextline].charAt(nextchar);
document.bannerform.banner.value=temp+cursor
setTimeout("animate()",25)}
if (document.all||document.getElementById)
window.onload=animate
// -->
</script>
Andiamo ad analizzare i punti del codice che possono essere personalizzati.
var line=new Array()
line[1]="HTML.it"
line[2]="il sito italiano sul Web publishing"
line[3]="400 applet Java"
line[4]="300 Javascript e molto altro"
line[5]="www.html.it"
Questo codice consente di inserire e modificare le varie frasi da visualizzare. In questo caso abbiamo inserito 5 frasi e dunque creato un numero corrispondente di voci line[x]. Se volessimo aggiungere una nuova riga di testo dovremmo proseguire la numerazione delle linee con line[6], line[7] ecc.
var ts_fontsize="16px"
Questa variabile imposta la grandezza in pixel del testo visualizzato.
Per il resto lo script non va modificato in nessun punto e puo' essere dunque inserito nei documenti.
