Lo script che presentiamo è un news ticker che ha la caratteristica principale di mostrare i testi con un effetto "macchina da scrivere".
Il testo, ed eventualmente le immagini, verranno mostrate poco alla volta.
Lo script è compatibile con Explorer e con Netscape 6.x mentre con Netscape 4.x non verrà visualizzato nulla nella pagina.
L'esempio si compone di 1 file:
- esempio.htm
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.
Tutto il codice va inserito direttamente nel corpo della pagina (nel punto esatto in cui vogliamo posizionare il box delle news):
<div id=ejs_box2_box style="background:#ffffff;color:#000000;font-family:verdana;font-size:10;border-style:dashed;border-width:1;border-color:#006699;width:200;height:90;padding:5">
</div>
<script type="text/javascript" language="javascript">
ejs_box2_message = new Array;
ejs_box2_message[0] = '<a href="http://webnews.html.it/focus/203.htm">Altnet: KaZaA strizza l'occhio alle major</a><img src="img/focus203.gif"/>';
ejs_box2_message[1] = '<a href="http://webnews.html.it/focus/202.htm">Napster verso la bancarotta?</a><img src="img/focus202.gif"/>';
ejs_box2_message[2] = '<a href="http://webnews.html.it/focus/201.htm">E-commerce: l'Europa tassa gli USA</a><img src="img/focus203.gif"/>';
ejs_box2_actual = 0;
ejs_box2_html_flag = 0;
function ejs_box2_go()
{
if(document.getElementById)
{
ejs_box2_char = 1;
ejs_box2_affich(ejs_box2_actual)
ejs_box2_actual++;
if(ejs_box2_actual>= ejs_box2_message.length)
ejs_box2_actual = 0;
}
}
function ejs_box2_affich(lactual)
{
var pix = ejs_box2_message[lactual].charAt(ejs_box2_char);
if(pix == "<")
ejs_box2_html_flag = 1;
if(pix == ">")
ejs_box2_html_flag = 0;
var texte = ejs_box2_message[lactual].substring(0,ejs_box2_char);
document.getElementById("ejs_box2_box").innerHTML = texte;
if(ejs_box2_char < ejs_box2_message[lactual].length)
{
ejs_box2_char++;
if(ejs_box2_html_flag == 1)
ejs_box2_affich(lactual);
else
setTimeout("ejs_box2_affich("+lactual+")",50)
}
else
setTimeout("ejs_box2_go()",2000)
}
window.onload = ejs_box2_go;
</script>
Analizziamo i punti da personalizzare.
<div id=ejs_box2_box
style="background:#ffffff;color:#000000;font-family:verdana;font-size:10;border-style:dashed;border-width:1;border-color:#006699;width:200;height:90;padding:5">
</div>
Il livello qui sopra è il "contenitore" delle news.
Attraverso i fogli di stile dobbiamo impostare rispettivamente:
background:#FFFFFF
il colore dello sfondo
color:#000000
il colore del testo
font-family:Verdana
il tipo di font del testo
font-size:10
la grandezza del testo
border-style:dashed
lo stile da applicare al bordo del box
border-width:1
lo spessore del bordo
border-color:#006699
il colore del bordo
width:200
la lunghezza del box (in pixel)
height:90
l'altezza del box (in pixel)
padding:5
la distanza del testo (o delle immagini) dal bordo del box
ejs_box2_message[0] = '<a href="http://webnews.html.it/focus/203.htm">Altnet: KaZaA strizza l'occhio alle major</a>
<img src="img/focus203.gif"/>';
ejs_box2_message[1] = '<a href="http://webnews.html.it/focus/202.htm">Napster verso la bancarotta?</a><img src="img/focus202.gif"/>';
ejs_box2_message[2] = '<a href="http://webnews.html.it/focus/201.htm">E-commerce: l'Europa tassa gli USA</a><img src="img/focus203.gif"/>';
come potete notare tutti i testi delle notizie sono contenuti, come spesso abbiamo visto, dentro degli ARRAY che devono seguire la solita numerazione progressiva tra le parentesi quadrate.
In ogni ARRAY possiamo inserire codice HTML, comprese immagini e link. Nel caso dovessimo usare del testo che abbia degli apostrofi (') dovremo anteporre un backslash () davanti al carattere ' per non provocare un errore.
Gli ARRAY che possono essere inseriti sono praticamente illimitati.
setTimeout("ejs_box2_go()",2000)
l'ultimo parametro da impostare è il tempo che deve passare tra un cambio di notizia e l'altro. il tempo, in questo caso, è di 2000 millisecondi. Nel caso volessimo un intervallo, ad esempio, di 5 secondi basterà cambiare il valore da 2000 in 5000.
Altre modifiche non sono necessarie.
