Borderman Animation2: the man who highlights your links with his bladder

Borderman: the man who defends your links with his bladder
The incredible Borderman strikes again! This time he highlights your links with the power of his full bladder. And furthermore he opens a slide-messagebox for each link. Welcome Borderman, the friend of your visitors, the enemy of dry links. IE 5x/6x/7x/8x, FF 2x/3x/4x, Opera 7x/8x/9x/10x, Chrome 3x/4x

Run the script
Wait until the page has been loaded. Move your cursor over this textlink to call Borderman!

Configuration

Step 1: Save all 16 images (and 1 animation) below and put them them all into the same folder as your webpage. Do not chnage their names!

Step 2: Open your webpage. Paste the following code right below the <body> tag.

// CREDITS:
// Borderman Animation: the man who defends your links with his bladder
// by Peter Gehrig
// Copyright (c) 2010 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.fabulant.com.

// IMPORTANT: 
// If you add this script to a script-library or script-archive 
// you have to add a link to http://www.fabulant.com on the webpage 
// where this borderman 2 will be running.

// width of the ticker (pixels)
var tickerwidth=120

// height of the ticker (pixels)
var tickerheight=60

// distance from the messagetext to the tickermargin (pixels)
var tickerpadding=5

// borderwidth of the ticker (pixels)
var borderwidth=2

// font-family
var fnt="Arial"

// font-size of the text
var fntsize=9

// font-color of the text
var fntcolor="FFFFFF"

// font-weight. Set a value between 1 to 9 to adjust the boldness
var fntweight=9

// backgroundcolor
var backgroundcolor="FF0000"

// The length of each step of the walking borderman (pixels)
var anistep=15

// The pause between each step of the walking borderman (milliseconds)
var anipause=80

// Do not edit the variables below
var max_ani=4
var aniwidth=54
var aniheight=54
var x_posani=0
var y_posani=0
var x_posflower=0
var y_posflower=0
var screenwidth
var screenheight
var thisani
var i_ani=1
var xrange
var x=100
var y=0
var timer,timerbox
var message=" "
var messagecontent=" "
var clipleft=0
var clipright=tickerwidth
var cliptop=0
var clipbottom=0
fntweight=100*fntweight

function getmessagecontent() {	
	messagecontent="<table cellspacing=0 cellpadding="+tickerpadding+" width="+tickerwidth+" height="+tickerheight+" border="+borderwidth+"><tr><td valign=top bgcolor="+backgroundcolor+">"
	messagecontent+="<span style='position:relative; font-family:"+fnt+";color:"+fntcolor+";font-size:"+fntsize+"pt;font-weight:"+fntweight+"'>"	
	messagecontent+="<font color='"+fntcolor+"'>"
	messagecontent+=message
	messagecontent+="</font>"
	messagecontent+="</span>"
	messagecontent+="</td></tr></table>"
}

function initiate(thismessage) {
	clearTimeout(timer)
	clearTimeout(timerbox)
	clipbottom=0
	message=thismessage
	getmessagecontent()

flower.innerHTML=messagecontent
    screenwidth=document.body.clientWidth
    y_posani=y-30
    x_posani=0
    document.getElementById('bottom1').style.left=x_posani
    document.getElementById('bottom1').style.top=y_posani
    thisani=eval("document.getElementById('left"+i_ani+"').style")
	movebottom1()
}

function stopanimation() {
	clearTimeout(timer)
	clearTimeout(timerbox)
	clipbottom=0

thisani.left=-1000
	document.getElementById('manurinating').style.left=-1000
	document.getElementById('flower').style.left=-1000
}

function movebottom1() {
	if (x_posani<x-aniwidth) {
		x_posani+=anistep
        thisani.left=-2000
        thisani=eval("document.getElementById('bottom"+i_ani+"').style")
		thisani.left=x_posani
		thisani.top=y_posani
        i_ani++
        if (i_ani>max_ani) {i_ani=1}
		timer=setTimeout("movebottom1()",anipause)
	}
	else {
		clearTimeout(timer)
		x_posani-=anistep
		showurinator()
	}
}

function showurinator() {
		thisani.left=-2000
		manurinate.src="manurinating.gif"
        document.getElementById('manurinating').style.left=x_posani
        document.getElementById('manurinating').style.top=y_posani
		timer=setTimeout("hideurinator()",2000)
}

function hideurinator() {
        document.getElementById('manurinating').style.left=-2000
		document.getElementById('flower').style.left=x-10
      	document.getElementById('flower').style.top=y-10
		document.getElementById('flower').style.zIndex=100
		upmessagebox()
		movebottom2()
}

function upmessagebox() {
		if (clipbottom<=tickerheight) {
			clipbottom+=2
        	document.getElementById('flower').style.top=parseInt(document.getElementById('flower').style.top)-2
			document.getElementById('flower').style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
			timerbox=setTimeout("upmessagebox()",50)
		}
		else {
			clearTimeout(timerbox)
			var timerdown=setTimeout("downmessagebox()",1000)
		}
}

function downmessagebox() {
		if (clipbottom>=0) {
			clipbottom-=2
        	document.getElementById('flower').style.top=parseInt(document.getElementById('flower').style.top)+2
			document.getElementById('flower').style.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
			timerbox=setTimeout("downmessagebox()",50)
		}
		else {
			clearTimeout(timerbox)
		}
}

function movebottom2() {
	if (x_posani<screenwidth-aniheight) {
		x_posani+=anistep
        thisani.left=-2000
        thisani=eval("document.getElementById('bottom"+i_ani+"').style")
		thisani.left=x_posani
		thisani.top=y_posani
        i_ani++
        if (i_ani>max_ani) {i_ani=1}
		timer=setTimeout("movebottom2()",anipause)
	}
	else {
		clearTimeout(timer)
		x_posani-=anistep
		moveright()
	}
}

function moveright() {
	if (y_posani>0) {
		y_posani-=anistep
        thisani.left=-2000
        thisani=eval("document.getElementById('right"+i_ani+"').style")
		thisani.left=x_posani
		thisani.top=y_posani
        i_ani++
        if (i_ani>max_ani) {i_ani=1}
		timer=setTimeout("moveright()",anipause)
	}
	else {
		clearTimeout(timer)
		y_posani+=anistep/2
		movetop()
	}
}

function movetop() {
	if (x_posani>0) {
		x_posani-=anistep
        thisani.left=-2000
        thisani=eval("document.getElementById('top"+i_ani+"').style")
		thisani.left=x_posani
		thisani.top=y_posani
        i_ani++
        if (i_ani>max_ani) {i_ani=1}
		var timer=setTimeout("movetop()",anipause)
	}
	else {
		clearTimeout(timer)
		stopanimation()
	}
}

function handlerMM(e){
	x = (!document.all) ? e.pageX : document.body.scrollLeft+event.clientX
	y = (!document.all) ? e.pageY : document.body.scrollTop+event.clientY
	flag=1
}

document.onmousemove = handlerMM;

// - End of JavaScript - -->
</script>

Step 2: Create textlinks as featured below:

code red and code blue should be placed into any textlink
code blue is the message. Replace it with your message!