This script creates a messagebox with an eyecatching background-fade-effect. Add as many messages as you like. Easy configuration of messages, font-attributes, colors, size and border. Full effect for Internet Explorer 5x/6x. Basic messagebox for NS4x/6x/7x and Opera 7x. Brought to you by www.freewebknowledge.com





Configuration:

Step 1: Open your webpage that will display your messagebox. Use a simple texteditor (NotePad or WordPad). Insert the following code where you wisth the textbox to appear:

<SCRIPT> // CREDITS: // Messagebox with fadeing Background // By Peter Gehrig // Copyright (c) 2004 Peter Gehrig. All rights reserved. // Permission given to use the script provided that this notice remains as is. // Additional scripts can be found at http://www.freewebknowledge.com/jscodes.php // set your messages. Add as many as you like (you may add additional HTML-tags) var text=new Array() text[0]="Thank you for visiting Free Webknowledge" text[1]="It's a pleasure to show you some great JavaScript tricks." text[2]="Also we invite you to test the speed of your Browser. <b>Just click here.</b>" // set the corresponding links // If you don't want to link a message just add a "#" instead of an URL var textlink=new Array() textlink[0]="http://www.freewebknowledge.com" textlink[1]="#" textlink[2]="http://www.freewebknowledge.com/jscodes.php" // set the corresponding targets // Acceptable values are "_blank", "_self", "_top" or the name of any frame var texttarget=new Array() texttarget[0]="_blank" texttarget[1]="_self" texttarget[2]="_top" // set the font of the messages var textfont="Arial" // set the font-color of the messages var textfontcolor="#FFFFFF" // set the rollover-fontcolor of the messages var textfontcolorrollover="#FF0000" // set the font-size of the messages (CSS-values) var textfontsize=9 // set the font-size for Netscape 4x (HTML-values) var textfontsizeHTML=2 // set the font backgroundcolor of the textbox var textbgcolor="#000000" // set the textweight (normal or bold) var textweight="nomal" // set the fontstyle (normal or italic) var textitalic="normal" // set the width of the textbox (pixels) var textwidth=240 // set the height of the textbox (pixels) var textheight=60 // set the pause (seconds) var textpause=2 // set the width of the border var textborder=2 // set the color of the border var textbordercolor="#FF0000" // set the horizontal alignment of the messages (center, left, right) var textalign="center" // set the vertival alignment of the messages (middle, top, bottom) var textvalign="middle" // do not edit below this line 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>

Step 2: Go to the top of the script and configure messages, font-attributes, colors, size and border.