Floating and Fadeing message boxes

hide me

Floating and fadeing message boxes
Draw more attention to your messages by putting them into floating and fadeing message boxes. You may add as many linkable messages. Easy configuration of text, font, font-size, font-color, font-weight, background-color and border. IE 5x/6x, NS4x/6x/7x.

Create more than 20 different text animations
Text Wheel is part of the new unique Text Animator. Text Animator allows you to create 20 different text animations for your webpages in no time. You can view, check and edit all effects while you are creating them. Text Animator generates the finished code for your personalized text animations. Click here to test Text Animator (requires Internet Explorer 5.5x or higher).

Configuration:

Step 1: Open the webpage that will display your message boxes. Use a simple texteditor such as NotePad or WordPad. Frontpage, Dreamweaver, GoLive or Word are not recommended. Insert the following code right below the <body>-tag. :

<SCRIPT>
// CREDITS:
// Floating and fadeing message boxes
// By Urs Dudli and Peter Gehrig
// Copyright (c) 2003 Peter Gehrig and Urs Dudli. All rights reserved.

var text=new Array()
var textlink=new Array()
var texttarget=new Array()
var textsplashcolors=new Array()

/////////////////////////////////////////////////////////////////////
// EDIT VALUES BELOW THIS LINE

// Add or delete as many floating message boxes as you like. 
// Just proceed as shown below (this sample creates three message boxes)

// Set the text, link and the target for your first floating message box
text[0]="Hello you"
textlink[0]="http://www.24fun.com"
texttarget[0]="_blank"

// Set the text, link and the target for the second floating message box
text[1]="Welcome"
textlink[1]="http://www.google.com"
texttarget[1]="_blank"

// Set the text, link and the target for the third floating message box
text[2]="Have a nice time"
textlink[2]="http://www.yahoo.com"
texttarget[2]="_blank"

// Set the font
var textfont="Arial"

// Set the font-weight to "bold" or "normal"
var textweight="bold"

// Set the rollover-color
var textfontcolorrollover="#ff0000"

// Set the font-size
var textfontsize=12

// Set the font-color
var textfontcolor="#000000"

// Set the background-color
var textbgcolor="#dddddd"

// Set the border-color 
var textbordercolor="#ff9000"

// Set the border-width 
var textborder=4

// DO NOT EDIT VALUES BELOW THIS LINE
/////////////////////////////////////////////////////////////////////

getcontent()
function getcontent() {
	for (i=0;i<=numberofmessages;i++) {
		var content=""
		if (ie || ns6) {	
			content="<table cellpadding="+textborder+" cellspacing=0 border=0><tr valign="+textvalign+"><td align="+textalign+">"
			content+="<a href=\""+textlink[i]+"\" target=\""+texttarget[i]+"\" 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]
			content+="</a></td></tr></table>"
		}
		else {	
			content="<table cellpadding="+textborder+" cellspacing=0 bgcolor="+textbgcolor+" border="+textborder+"><tr valign="+textvalign+"><td align="+textalign+">"
			content+="<a href=\""+textlink[i]+"\" target=\""+texttarget[i]+"\">"
			content+=textweightA
			content+=textitalicA
			content+="<font face=\""+textfont+"\" size="+textfontsizeHTML+" color=\""+textfontcolor+"\">"
			content+=text[i]
			content+="</font>"
			content+=textitalicB
			content+=textweightB
			content+="</a></td></tr></table>"
		}
		spancontent[i]=content
	}
}

function randommaker(range) {		
	rand=Math.floor(range*Math.random())
	if (rand==0) {rand=Math.ceil(range/2)}
    return rand
}

function checkmovement() {
	checkposition()
	movepictures()
    timer=setTimeout("checkmovement()",tempo)
}

}

function checkposition() {
	if (ie) {
		for (i=0;i<=numberofmessages;i++) {             
			var thisspan=eval("document.all.span"+i+".style")
			if (thisspan.posLeft>marginright-boxwidth[i]-floatingspeed) {
				thisspan.posLeft-=Math.abs(stepx[i]+1)
				stepx[i]=randommaker(floatingspeed)*-1	
			}
			if (thisspan.posLeft<marginleft) {
				thisspan.posLeft+=Math.abs(stepx[i])
				stepx[i]=randommaker(floatingspeed)			
			}	
			if (thisspan.posTop>marginbottom-boxheight[i]-floatingspeed) {
				thisspan.posTop-=Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)*-1

}
			if (thisspan.posTop<margintop) {
				thisspan.posTop+=Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)
			}
		}
	}
	if (ns4) {
		for (i=0;i<=numberofmessages;i++) {             
			var thisspan=eval("document.span"+i)
			if (thisspan.left>marginright-boxwidth[i]-floatingspeed) {
				thisspan.left-=Math.abs(stepx[i]+1)
				stepx[i]=randommaker(floatingspeed)*-1	
			}
			if (thisspan.left<marginleft) {
				thisspan.left+=Math.abs(stepx[i])
				stepx[i]=randommaker(floatingspeed)			
			}	
			if (thisspan.top>marginbottom-boxheight[i]-floatingspeed) {
				thisspan.top-=Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)*-1

}
			if (thisspan.top<margintop) {
				thisspan.top+=Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)
			}
		}
	}
	
	if (ns6) {
		for (i=0;i<=numberofmessages;i++) {             
			var thisspan=document.getElementById('span'+i).style
			var leftx=parseInt(thisspan.left)
			var topy=parseInt(thisspan.top)
			if (leftx>marginright-boxwidth[i]-floatingspeed) {
				thisspan.left=leftx-Math.abs(stepx[i]+1)
				stepx[i]=randommaker(floatingspeed)*-1	
			}
			if (leftx<marginleft) {
				thisspan.left=leftx+Math.abs(stepx[i])
				stepx[i]=randommaker(floatingspeed)			
			}	
			if (topy>marginbottom-boxheight[i]-floatingspeed) {
				thisspan.top=topy-Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)*-1

}
			if (topy<margintop) {
				thisspan.top=topy+Math.abs(stepy[i])
				stepy[i]=randommaker(floatingspeed)
			}
		}
	}
}

if (ie || ns6) {
	for (i=0;i<=numberofmessages;i++) {
    	document.write("<span id='span"+i+"' style='position:absolute;top:0px;left:0px;filter:alpha(opacity=0);-moz-opacity:0;border-style:solid;border-color:"+textbordercolor+";border-width:"+textborder+"px;background-color:"+textbgcolor+";'></span>")
    	document.close()
	}
}
if (ns4) {
	for (i=0;i<=numberofmessages;i++) {
    	document.write("<layer name='span"+i+"' left=0 top=0>"+spancontent[i]+"</layer>")
    	document.close()
	}
}
window.onload=setValues
</script>
<div style="position:absolute;top:0px;left:0px;visibility:hidden">hide me</div>

IMPORTANT: do not paste the code into table-cells or between <div> tags or <span> tags!

Step 2: Open your webpage. Go to the top of the script-code and configure the messages and font-attributes

Step 3: Have fun!