Lo script che presentiamo è un news ticker espandibile. In modalità normale vedremo solamente i titoli delle news che si alterneranno; espandendo il menù, invece, verranno mostrate tutte le notizie.
Lo script è compatibile con Explorer e Netscape 6.x mentre con Netscape 4.x potremmo avere qualche problema riguardo l'aspetto grafico.
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.
Impostiamo i fogli di stile tra i tag <head> della pagina:
<style>
<!--
#listbutton{
border:1px solid #4B4B4B;
background-color:#F3F3F3;
width:50px;
height:12px;
font: normal 11px Verdana;
text-align:center;
cursor:pointer;cursor:hand;
}
.expandhighlight, .expandhighlight a{
color:red;
}
-->
</style>
Le due classi ("listbutton" e "expandhighlight") servono a determinare l'aspetto estetico di alcuni elementi del news ticker. In particolare
"listbutton"
i valori della classe "listbutton" riguardano esclusivamente la personalizzazione del bottone "APRI". possiamo impostarne il colore di sfondo, il tipo di font, la grandezza e così via
"expandhighlight"
la classe "expandhighlight" si riferisce al colore per la messa in evidenza dei titoli quando il news ticker è espanso.
A questo punto dobbiamo inserire lo script vero e proprio nel corpo della pagina e, più precisamente, nel punto esatto in cui vogliamo posizionare il news ticker
<script language="JavaScript1.2">
var tickercontents=new Array()
tickercontents[0]='<font face=verdana>Ti servono script gratuiti in php?
<a href="http://freephp.html.it">[Freephp.html.it]</a></font>'
tickercontents[1]='<font face=verdana>Gli italiani e la Rete <a
href="http://webnews.html.it/focus/index.html">[Leggi tutto]</a></font>'
tickercontents[2]='<font face=verdana>Sondaggi? Statistiche? Utenti online?
<a href="http://webtool.html.it/">[Leggi tutto]</a></font>'
var tickerwidth='400'
var tickerbgcolor='#c6c6c6'
var tickdelay=3000
var ie4=document.all&&navigator.userAgent.indexOf("Opera")==-1
var ns6=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1
var ns4=document.layers
var currentmessage=0
var tickercontentstotal=''
function changetickercontent(){
if (ns4){
tickerobj.document.tickernssub.document.write('<strong><a href="#"
onClick="return expandlist(event)">Apri</a></strong> | '+tickercontents[currentmessage])
tickerobj.document.tickernssub.document.close()
}
else if (ie4||ns6){
tickerobj.innerHTML=tickercontents[currentmessage]
previousmessage=(currentmessage==0)? tickercontents.length-1 : currentmessage-1
tickerexpand_item=ns6? document.getElementById("expand"+currentmessage) :
eval("expand"+currentmessage)
tickerexpand_previousitem=ns6? document.getElementById("expand"+previousmessage)
: eval("expand"+previousmessage)
tickerexpand_previousitem.className=""
tickerexpand_item.className="expandhighlight"
}
currentmessage=(currentmessage==tickercontents.length-1)? 0 : currentmessage+1
setTimeout("changetickercontent()",tickdelay)
}
function start_ticking(){
if (ns4) document.tickernsmain.visibility="show"
tickerobj=ie4? tickerlist : ns6? document.getElementById("tickerlist") : ns4?
document.tickernsmain : ""
tickerexpandobj=ie4? tickerexpand : ns6? document.getElementById("tickerexpand")
: ns4? document.expandlayer : ""
for (i=0;i<tickercontents.length;i++)
tickercontentstotal+='<div id="expand'+i+'">- '+tickercontents[i]+'</div>'
if (ie4||ns6)
tickerexpandobj.innerHTML=tickercontentstotal
else{
tickerexpandobj.document.write(tickercontentstotal)
tickerexpandobj.document.close()
}
changetickercontent()
}
function expandlist(e){
if (ie4||ns6){
tickerexpand_parent=ie4? tickerexpand.parentElement :
document.getElementById("tickerexpand").parentNode
tickerexpand_parent.style.display=(tickerexpand_parent.style.display=="none")?
"" : "none"
}
else{
document.expandlayer.left=e.pageX-e.layerX
document.expandlayer.top= e.pageY-e.layerY+20
document.expandlayer.visibility=(document.expandlayer.visibility=="hide")?
"show" : "hide"
return false
}
}
if (ie4||ns6)
document.write('<table class="tabella" border="0"
style="width:'+tickerwidth+';border:1px solid black;text-indent:2px" bgcolor="'+tickerbgcolor+'" cellspacing="0" cellpadding="0"><tr><td
width="90%" id="tickerlist" bgcolor="'+tickerbgcolor+'"></td><td width="10%" bgcolor="'+tickerbgcolor+'"><div id="listbutton"
onClick="expandlist()">Apri</div></td></tr><tr style="display:none"><td id="tickerexpand" width="90%"
bgcolor="'+tickerbgcolor+'"> </td><td width="10%"></td></tr></table>')
window.onload=start_ticking
</script>
<ilayer id="tickernsmain" width=&{tickerwidth}; bgColor=&{tickerbgcolor};
visibility=hide><layer id="tickernssub" width=&{tickerwidth}; left=0 top=0></layer></ilayer>
<layer id="expandlayer" bgColor=&{tickerbgcolor}; visibility=hide>
</layer>
Vediamo come personalizzare lo script:
tickercontents[0]='<font face=verdana>Ti servono script gratuiti in php? <a href="http://freephp.html.it">[Freephp.html.it]</a></font>'
tickercontents[1]='<font face=verdana>Gli italiani e la Rete <a href="http://webnews.html.it/focus/index.html">[Leggi tutto]</a></font>'
tickercontents[2]='<font face=verdana>Sondaggi? Statistiche? Utenti online? <a href="http://webtool.html.it/">[Leggi tutto]</a></font>'
Qui sopra abbiamo i tre ARRAY contenenti i titoli delle news e i rispettivi link. Come potete notare in ogni array è consentito l'utilizzo del codice html.
Nel caso volessimo aggiungere altre news basterà seguire la numerazione progressiva tra le parentesi quadre; in questo caso quindi, la notizia successiva sarà così strutturata:
tickercontents[3]='<font face=verdana>Quarta news <a href="http://www.sito.it">[Leggi tutto]</a></font>'
var tickerwidth='400'
è la lunghezza, in pixel, del news ticker
var tickerbgcolor='#c6c6c6'
indica il colore di sfondo del news ticker
var tickdelay=3000
indica la velocità per l'alternarsi dei titoli; più sarà basso il valore e più i titoli cambieranno velocemente
Altre modifiche non sono necessarie.
