News board - scrolling

Dette script er virkelig velegnet til fx nyhedsboks el.l. på din hjemmeside. Tekster skiftes ved at scrolle opad en ad gangen.

Der er mange indstillingsmuligheder, så du selv kan angive skrifttype, størrelse, ramme, hastighed m.v.

I denne news funktion kan du endda indsætte dit eget baggrundsbillede i tekstboksen.

Sådan gør du:

Dette script består i virkeligheden af tre dele - to scripts samt noget html kode. Men alle tre dele indsættes, der hvor du vil have nyhedsfunktionen. Her er den samlede kode kilde:

<script LANGUAGE="JavaScript1.2">
<!-- Javascript starter her

//Script hentet fra @-beynder
//http://www.a-begynder.dk
//Stedet for webmasters ... vi har næsten alt til hjemmesider
//----------------------------------------------------------
 
// Definer udseendet på nyhedsboksen
var scrollerwidth='150px'
var scrollerheight='100px'
var scrollerbgcolor='#cccccc'
var kant='1px solid #000000'

// Definer font farve, størrelse mv.
var type='arial'
var color='#888888'
var size='4px'

// Url til evt. baggrundsbillede
// Ingen baggrundsbillede - sæt til =''
var scrollerbackground='../images/mitbillede.gif'

// Sæt pause imellem beskeder samt rullehastighed
var scrollpause=4000
var scrollspeed=50

// Skriv dine tekster her - der SKAL være fem (5)
// Du kan godt bruge html-kode til fx links
var messages=new Array()
messages[0]="Tekst1"
messages[1]="Tekst2"
messages[2]="Tekst3"
messages[3]="Tekst4"
messages[4]="Tekst5"


//// Du skal IKKE ændre noget efter denne linie /////
/////////////////////////////////////////////////////

var starttag='<div style="padding:2"><font face="' + type + '" color=' + color + ' size=' + size + '>'

messages[0]=starttag + messages[0] + '</font></div>'
messages[1]=starttag + messages[1] + '</font>'
messages[2]=starttag + messages[2] + '</font>'
messages[3]=starttag + messages[3] + '</font>'
messages[4]=starttag + messages[4] + '</font>'

var ie=document.all
var dom=document.getElementById

if (messages.length>2)
i=2
else
i=0

function move1(whichlayer){
tlayer=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=5){
tlayer.top=0
setTimeout("move1(tlayer)",scrollpause)
setTimeout("move2(document.main.document.second)", scrollpause)
return
}
if (tlayer.top>=tlayer.document.height*-1){
tlayer.top-=5
setTimeout("move1(tlayer)",scrollspeed)
}
else{
tlayer.top=parseInt(scrollerheight)
//http://www.a-begynder.dk
tlayer.document.write(messages[i])
tlayer.document.close()
if (i==messages.length-1)
i=0
else
i++
}
}

function move2(whichlayer){
tlayer2=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=5){
tlayer2.top=0
setTimeout("move2(tlayer2)",scrollpause)
setTimeout("move1(document.main.document.first)", scrollpause)
return
}
if (tlayer2.top>=tlayer2.document.height*-1){
tlayer2.top-=5
setTimeout("move2(tlayer2)",scrollspeed)
}
else{
tlayer2.top=parseInt(scrollerheight)
tlayer2.document.write(messages[i])
tlayer2.document.close()
if (i==messages.length-1)
i=0
else
i++
}
}

function move3(whichdiv){
tdiv=eval(whichdiv)
if (parseInt(tdiv.style.top)>0&&parseInt(tdiv.style.top)<=5){
tdiv.style.top=0+"px"
setTimeout("move3(tdiv)",scrollpause)
setTimeout("move4(second2_obj)",scrollpause)
return
}
if (parseInt(tdiv.style.top)>=tdiv.offsetHeight*-1){
tdiv.style.top=parseInt(tdiv.style.top)-5+"px"
setTimeout("move3(tdiv)",scrollspeed)
}
else{
tdiv.style.top=parseInt(scrollerheight)
tdiv.innerHTML=messages[i]
if (i==messages.length-1)
i=0
else
i++
}
}

function move4(whichdiv){
tdiv2=eval(whichdiv)
if (parseInt(tdiv2.style.top)> 0&&parseInt(tdiv2.style.top)<=5){
//http://www.a-begynder.dk
tdiv2.style.top=0+"px"
setTimeout("move4(tdiv2)",scrollpause)
setTimeout("move3(first2_obj)",scrollpause)
return
}
if (parseInt(tdiv2.style.top)>=tdiv2.offsetHeight*-1){
tdiv2.style.top=parseInt(tdiv2.style.top)-5+"px"
setTimeout("move4(second2_obj)",scrollspeed)
}
else{
tdiv2.style.top=parseInt(scrollerheight)
tdiv2.innerHTML=messages[i]
if (i==messages.length-1)
i=0
else
i++
}
}

function startscroll(){
if (ie||dom){
first2_obj=ie? first2 : document.getElementById("first2")
second2_obj=ie? second2 : document.getElementById("second2")
move3(first2_obj)
second2_obj.style.top=scrollerheight
second2_obj.style.visibility='visible'
}
else if (document.layers){
document.main.visibility='show'
move1(document.main.document.first)
document.main.document.second.top=parseInt(scrollerheight)+5
document.main.document.second.visibility='show'
}
}

window.onload=startscroll

// javascript slutter her -->
</script>


<ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgColor=&{scrollerbgcolor}; background=&{scrollerbackground}; visibility=hide>
<layer id="first" left=0 top=1 width=&{scrollerwidth};>
<script language="JavaScript1.2">
if (document.layers)
document.write(messages[0])
</script>
</layer>
<layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>
<script language="JavaScript1.2">
if (document.layers)
document.write(messages[dyndetermine=(messages.length==1)? 0 : 1])
</script>
</layer>
</ilayer>

<script language="JavaScript1.2">
<!-- Javascript starter her
if (ie||dom){
document.writeln('<div id="main2" style="border:' + kant + '; position:relative;width:'+scrollerwidth+';height:'+ scrollerheight+';overflow:hidden;background-color:'+scrollerbgcolor+' ;background-image:url('+scrollerbackground+')">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+ scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0px;top:0px">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+ ';left:0px;top:1px;">')
document.write(messages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+ ';left:0px;top:0px;visibility:hidden">')
//http://www.a-begynder.dk
document.write(messages[dyndetermine=(messages.length==1)? 0 : 1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</div>')
}
// javascript slutter her -->
</script>
 

Eksempel >>

Læg mærke til at nogle af teksterne ikke har noget link.

Bemærk:

Scriptet er lavet til præcis fem tekster. Dette antal SKAL overholdes for at scriptet virker efter hensigten.

Scriptet bruger en form for absolut placering, hvilket medfører, at tekstboksen vil overskrive det område, som den fylder. Det er derfor lettest, at indsætte scriptet i en tabel med kun én celle.

Hint:

Det kan endda lade sig gøre, at indsætte billeder i dine nyheder, hvilket du kan se i vores eksempel. Det eneste du skal huske på er, at du i stedet for anførselstegn skal bruge apostrof.

Det kan fx se således ud:

<img border='0' src='ani-gear.gif' width='93' height='70'>

Til toppen >>