|
Meerdere teksten met links en fade effec
Een prachtige dynamische banner , simpel met een javascriptje. Uiteraard is alles qua lay-out aan te passen ( zie script ) zoals target, kleuren, grootte etc. En je kunt er net zoveel teksten in zetten als je wilt !
<center>
<SCRIPT>
// verander hieronder de teksten.. je kunt er net zoveel invoegen als je wilt.
var text=new Array()
text[0]="Leuk dat je ff checkt.. ;) ?"
text[1]="Mooi scriptje hé?? Niet gdacht héé"
text[2]="Groetjes Niels Sikkema ;) P.S. Druk hierop en click even ;)</b>"
// hieronder de corresponderende links
// wil je geen link.. zet er dan "#" neer in plaats van een url
var textlink=new Array()
textlink[0]="http://www.piepbadeendje.be"
textlink[1]="http://www.piepbadeendje.be"
textlink[2]="http://www.piepbadeendje.be"
// hieronder de bijbehorende targets
// keuze uit "_blank", "_self", "_top" of ieder andere frame naam van je site
var texttarget=new Array()
texttarget[0]="_blank"
texttarget[1]="_blank"
texttarget[2]="_blank"
// Verander hieronder het font type
var textfont="Papyrus"
// de kleur van de teksten
var textfontcolor="#CCFFCC"
// de kleur bij een mouse-over
var textfontcolorrollover="#FF0000"
// grootte lettertype
var textfontsize=9
// dit is voor netscape gebruikers 4x
var textfontsizeHTML=2
// achtergrondkleur van de tekstbox
var textbgcolor="#000000"
// weergave tekst (normal of bold)
var textweight="nomal"
// fontstijl (normal of italic)
var textitalic="normal"
// breedte van de tekstbox (pixels)
var textwidth=260
// hoogte van de tekstbox (pixels)
var textheight=60
// pauze in seconden
var textpause=2
// breedte van de rand tekstbox
var textborder=1
// kleur van de rand
var textbordercolor="#FF0000"
// weergave teksten horizontaal(center, left, right)
var textalign="center"
// weergave teksten vertikaal (middle, top, bottom)
var textvalign="middle"
// verander hieronder niets meer
var textdecoration="none"
var textweightA="<b>"
var textweightB="</b>"
var textitalicA=""
var textitalicB=""
var transparency=100
var transparencystep=2
var x_pos=0
var y_pos=0
var i_text=0
var textsplit=""
var i_textsplit=0
var i_mark=0
var tickercontent
var pausefade=30
textpause*=1000
var oneloopfinished=false
var browserinfos=navigator.userAgent
var ie=document.all&&!browserinfos.match(/Opera/)
var ns4=document.layers
var ns6=document.getElementById&&!document.all&&!browserinfos.match(/Opera/)
var opera=browserinfos.match(/Opera/)
var browserok=ie||ns4||ns6||opera
function changecontent() {
getcontent()
i_text++
if (i_text>=text.length) {i_text=0}
if (ie) {
ticker.innerHTML=content
fadeout()
}
if (opera || ns6) {
document.getElementById('ticker').innerHTML=content
var texttimer=setTimeout("changecontent()",2*textpause)
}
if (ns4) {
document.roof.document.ticker.document.write(content)
document.roof.document.ticker.document.close()
var texttimer=setTimeout("changecontent()",textpause)
}
}
function fadein() {
if (transparency<100){
transparency+=transparencystep
if (ie) {
document.all.tickerbg.filters.alpha.opacity=transparency
}
var fadetimer=setTimeout("fadein()",pausefade)
}
else {
clearTimeout(fadetimer)
setTimeout("changecontent()",1000)
}
}
function fadeout() {
if (transparency>0){
transparency-=transparencystep
if (ie) {
document.all.tickerbg.filters.alpha.opacity=transparency
}
if (ns6) {
document.getElementById('tickerbg').style.MozOpacity=transparency/100
}
var fadetimer=setTimeout("fadeout()",pausefade)
}
else {
clearTimeout(fadetimer)
setTimeout("fadein()",textpause)
}
}
getcontent()
function getcontent() {
if (ie || opera) {
var tablewidth=textwidth-2*textborder
var tableheight=textheight-2*textborder
}
else {
var tablewidth=textwidth
var tableheight=textheight
}
if (ie || ns6) {
var padding=parseInt(textborder)+3
content="<table width="+tablewidth+" height="+tableheight+" cellpadding="+padding+" cellspacing=0 border=0><tr valign="+textvalign+"><td align="+textalign+">"
content+="<a href=\""+textlink[i_text]+"\" target=\""+texttarget[i_text]+"\" style=\"position:relative;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";text-decoration:"+textdecoration+";color:"+textfontcolor+";font-style:"+textitalic+";\" onMouseOver=\"this.style.color=\'"+textfontcolorrollover+"\'\" onMouseOut=\"this.style.color=\'"+textfontcolor+"\'\">"
content+=text[i_text]
content+="</a></td></tr></table>"
}
else {
content="<table width="+tablewidth+" height="+tableheight+" cellpadding="+textborder+" cellspacing=0><tr valign="+textvalign+"><td align="+textalign+">"
content+="<a href=\""+textlink[i_text]+"\" target=\""+texttarget[i_text]+"\" style=\"position:relative;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";text-decoration:"+textdecoration+";color:"+textfontcolor+";font-style:"+textitalic+";\">"
content+=text[i_text]
content+="</a></td></tr></table>"
framecontent="<table width="+tablewidth+" height="+tableheight+" cellpadding=0 cellspacing=0 border="+textborder+"><tr><td>"
framecontent+="<font color=\""+textbgcolor+"\">"
framecontent+="."
framecontent+="</font>"
framecontent+="</td></tr></table>"
}
}
if (ie || ns6 || opera) {
if (ns6) {
textwidth-=2*textborder
textheight-=2*textborder
}
document.write("<div id=\"roof\" style=\"position:relative;width:"+textwidth+"px;height:"+textheight+"px;font-family:\'"+textfont+"\';border-style:solid;border-color:"+textbordercolor+";border-width:"+textborder+"px;background-color:"+textbgcolor+";\">")
if (!opera && !ns6 ) {
document.write("<div id=\"tickerbg\" style=\"position:absolute;top:"+-textborder+"px;left:"+-textborder+"px;width:"+textwidth+"px;height:"+textheight+"px;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";font-style:"+textitalic+";border-style:solid;border-color:"+textbordercolor+";border-width:"+textborder+"px;background-color:"+textfontcolor+";overflow:hidden\;filter:alpha(opacity=100)\">")
document.write("</div>")
}
document.write("<div id=\"ticker\" style=\"position:absolute;top:"+-textborder+"px;left:"+-textborder+"px;width:"+textwidth+"px;height:"+textheight+"px;font-family:\'"+textfont+"\';font-size:"+textfontsize+"pt;font-weight:"+textweight+";font-style:"+textitalic+";border-style:solid;border-color:"+textbordercolor+";border-width:"+textborder+"px;overflow:hidden\;\">")
document.write("</div></div>")
window.onload=changecontent
}
else if (ns4) {
document.write("<ilayer name=\"roof\" width="+textwidth+" height="+textheight+">")
document.write("<layer name=\"tickerframe\" width="+textwidth+" height="+textheight+" top=0 left=0 bgcolor="+textbgcolor+">")
document.write(framecontent)
document.write("</layer>")
document.write("<layer name=\"ticker\" width="+textwidth+" height="+textheight+" top=0 left=0>")
document.write()
document.write("</layer>")
document.write("</ilayer>")
window.onload=changecontent
}
</script>
download het script
Zie hier een demo van het script
Reacties van leden
Auteur: Niels Sikkema @ 05-12-2005
Hij is misschien met 1200 regels, maar oké! Hij is mooi Auteur: Remco @ 04-01-2006
dom. wat heb je eraan??? Auteur: d-sar @ 10-02-2006
ik vind het wel grapig
|
