testo animato

**kim** · 21-09-2005, 14:43

ciao a tutti

devo inserire nel mio sito le news (es. data x - evento y)come nel sito http://www.satspa.it/
nella banda a destra del sito, sotto al numero verde, ci sono le news in animazione con la possibilità di cliccare sul testo e poter leggere la notizia per esteso

l'effetto riesco a realizzarlo con Flash, non so come realizzare l'effetto in html... sapete aiutarmi?

grazie

**keratox** · 21-09-2005, 15:13

E' javascript...

codice:

<SCRIPT LANGUAGE="JavaScript">



<!-- Begin
//slider's width
var swidth=138

//slider's height
var sheight=120

//slider's speed
var sspeed=2

//messages: change to your own; use as many as you'd like; set up Hyperlinks to URLs as you normally do: ..message..
var singletext=new Array()

		singletext[0]='<div align="left">[img]img/fr_verde.gif[/img]<font face=Verdana size=2 color="black">16-9-2005
Lavori a Spezzano
</font>'
	
		singletext[1]='<div align="left">[img]img/fr_verde.gif[/img]<font face=Verdana size=2 color="black">2-9-2005
Attenzione agli “addetti del gas”
</font>'
	
		singletext[2]='<div align="left">[img]img/fr_verde.gif[/img]<font face=Verdana size=2 color="black">26-8-2005
Alcune indicazioni sulle isole ecologiche 
</font>'
	
		singletext[3]='<div align="left">[img]img/fr_verde.gif[/img]<font face=Verdana size=2 color="black">4-8-2005
 Attenzione agli “addetti del gas”
</font>'
	
		singletext[4]='<div align="left">[img]img/fr_verde.gif[/img]<font face=Verdana size=2 color="black">28-7-2005
Chiusura estiva dello sportello commerciale 
</font>'
	
		singletext[5]='<div align="left">[img]img/fr_verde.gif[/img]<font face=Verdana size=2 color="black">15-7-2005
La disinfestazione di cimici e zanzare 
</font>'
	
		singletext[6]='<div align="left">[img]img/fr_verde.gif[/img]<font face=Verdana size=2 color="black">1-7-2005
 Il conferimento dell’amianto
</font>'
	
		singletext[7]='<div align="left">[img]img/fr_verde.gif[/img]<font face=Verdana size=2 color="black">29-6-2005
Il bilancio 2004 di Sat SpA
</font>'
	
if (singletext.length>1)
i=1
else
i=0
function start(){
if (document.all){
ieslider1.style.top=sheight
iemarquee(ieslider1)
}
else if (document.layers){
document.ns4slider.document.ns4slider1.top=sheight
document.ns4slider.document.ns4slider1.visibility='show'
ns4marquee(document.ns4slider.document.ns4slider1)
}
else if (document.getElementById&&!document.all){
document.getElementById('ns6slider1').style.top=sheight
ns6marquee(document.getElementById('ns6slider1'))
}
}
function iemarquee(whichdiv){
iediv=eval(whichdiv)
if (iediv.style.pixelTop>0&&iediv.style.pixelTop<=sspeed){
iediv.style.pixelTop=0
setTimeout("iemarquee(iediv)",100)
}
if (iediv.style.pixelTop>=sheight*-1){
iediv.style.pixelTop-=sspeed
setTimeout("iemarquee(iediv)",100)
}
else{
iediv.style.pixelTop=sheight
iediv.innerHTML=singletext[i]
if (i==singletext.length-1)
i=0
else
i++
}
}
function ns4marquee(whichlayer){
ns4layer=eval(whichlayer)
if (ns4layer.top>0&&ns4layer.top<=sspeed){
ns4layer.top=0
setTimeout("ns4marquee(ns4layer)",100)
}
if (ns4layer.top>=sheight*-1){
ns4layer.top-=sspeed
setTimeout("ns4marquee(ns4layer)",100)
}
else{
ns4layer.top=sheight
ns4layer.document.write(singletext[i])
ns4layer.document.close()
if (i==singletext.length-1)
i=0
else
i++
}
}
function ns6marquee(whichdiv){
ns6div=eval(whichdiv)
if (parseInt(ns6div.style.top)>0&&parseInt(ns6div.style.top)<=sspeed){
ns6div.style.top=0
setTimeout("ns6marquee(ns6div)",100)
}
if (parseInt(ns6div.style.top)>=sheight*-1){
ns6div.style.top=parseInt(ns6div.style.top)-sspeed
setTimeout("ns6marquee(ns6div)",100)
}
else{
ns6div.style.top=sheight
ns6div.innerHTML=singletext[i]
if (i==singletext.length-1)
i=0
else
i++
}
}
//  End -->
</script>

Devi cambiare i valori dell'array singletext[0], singletext[1] etc.. per inserire le news..

Nel body devi "caricarlo"

codice:

<body onload="Start();">

poi nel punto della pagina che preferisci inserisci questo

codice:

                            <ilayer id="ns4slider" width="&{swidth};" height="&{sheight};"> 
                            <layer id="ns4slider1" height="&{sheight};" onmouseover="sspeed=0;" onmouseout="sspeed=2">
<script language="JavaScript">
if (document.layers)
document.write(singletext[0])

</script>
</layer></ilayer>
<script language="JavaScript">
if (document.all){
document.writeln('<div style="position:relative;overflow:hidden;width:'+swidth+';height:'+sheight+';clip:rect(0 '+swidth+' '+sheight+' 0);border:0 solid white;" onmouseover="sspeed=0;" onmouseout="sspeed=2">')
document.writeln('<div id="ieslider1" style="position:relative;width:'+swidth+';">')
document.write(singletext[0])
document.writeln('</div></div>')
}
if(document.getElementById&&!document.all){
document.writeln('<div style="position:relative;overflow:hidden;width:'+swidth+';height:'+sheight+';clip:rect(0 '+swidth+' '+sheight+' 0);border:0px solid white;" onmouseover="sspeed=0;" onmouseout="sspeed=2">')
document.writeln('<div id="ns6slider1" style="position:relative;width:'+swidth+';">')
document.write(singletext[0])
document.writeln('</div></div>')
}
</script>

Non preoccuparti del fatto che il codice lo prendi da sto sito. Perchè pure quest'ultimo lo ha preso da altre parti.

Ciao

**kim** · 21-09-2005, 15:39

grazie per la risposta

il primo script l'ho inserito PRIMA del </head> (dove avevo già messo degli altri script)

non mi è tanto chiaro dove devo mettere gli altri 2 script :master:

**keratox** · 21-09-2005, 15:48

Il primo pezzo di codice va tra <head> e </head>

Il secondo (quell'unica riga) è il tag <body> con l'attributo onload="" e il valore start() ossia la funzione javascript.

Il terzo va tra <body></body> nel punto della pagina in cui vuoi le news.

**kiapersempre** · 21-09-2005, 17:27

ma, se il "problema" era far scorrere il testo e poterci cliccare sopra, nn avresti fatto prima ad usare <marquee>?
<marquee behavior="down" direction="up" height="100" loop="infinite" scrollAmount="1" scrollDelay="1" width="520" align="left"> testo </marquee>

**micsas** · 22-09-2005, 01:25

avresti fatto prima con un linguaggio lato server creando una struttura master/detail

tieni conto che con quello script chi avrà javascript disabilitato non potrà leggere le news.

**kim** · 22-09-2005, 11:05

ho impostato lo script come spiegato da keratox, sul mio pc locale non funziona...

probabilmente deve fare l'update della pagina via FTP...

Discussione: testo animato

Strumenti discussione

Ricerca discussione

Visualizza

testo animato

Permessi di invio