Curve Ticker with Image-Tiles

Curve Ticker with Image-Tiles
Do you want to present your messages in an outstanding way? Use curve-ticker! It looks smashing. The configuration of messages and images is kid's stuff. Requires Internet Explorer 5x/6x/7x or higher.

Configuration:

Step 1: Open your webpage. Paste the following code into the head-section of your webpage:

Step 2: Paste the following code right above the </body>-tag of your webpage (almost at the bottom of the webpage):

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

// CONFIGURATION:
// Go to http://www.fabulant.com
// and create more text animation
// with our new Text Factory.

// Add as many messages as you like
var message=new Array("Hello you!", "Do you love JavaScript?", "Ok, then you are ready ...", "... to test our scripts.", "Have fun and try to be happy.")

// Set the URLs of the tile-images (add as many as you like)
var imgsrc=new Array("flower1.gif","flower2.gif","flower3.gif")

// Add as many outline-colors as you like
var color=new Array("white","white","white","black","white")

// Set the width of the outline
var strkweight=2

// Set the waiting period between the messages (seconds)
var pause=2

// Set the strength of the opacity (transpareny of letters)
var strengthopacity="100%"

// Do not edit below this line
var outerwidth=document.body.clientWidth
var outerheight=document.body.clientHeight

var innerwidth=Math.floor(0.97*outerwidth)
var innerheight=Math.floor(1*outerheight)

var archeight=Math.floor(0.5*outerheight)

var control1_x=Math.floor(innerwidth/3)
var control2_x=Math.floor(innerwidth/3*2)

var path=new Array()
var i_message=0
var i_messagelength=0
var i_imgsrc=0
var i_color=0
pause*=1000

var ns4=document.layers?1:0
var ns6=document.getElementById&&!document.all?1:0 
var ie=document.all?1:0

function initcurveticker() {
	var i_preload=0
	for (i=0;i<=imgsrc.length-1;i++) {
		var imgref=eval("document.n"+i)
		if (imgref.complete) {i_preload++}
	}
	if (i_preload>=imgsrc.length-1) {
		changeform()
	}
	else {
		var timer=setTimeout("initcurveticker()",5000)
	}
}

function changeform() {
	if (i_imgsrc >= imgsrc.length) {i_imgsrc=0}
	if (i_color >= color.length) {i_color=0}
	document.getElementById('fillid').src=imgsrc[i_imgsrc]
	document.getElementById('strokeid').color=color[i_color]
	if (i_message < message.length) {
		var timer=setTimeout("tick()",200)
	}
	else {document.getElementById('textpathid').string=""}
}

function tick() {
	if (i_messagelength <= message[i_message].length) {
		var messagestringend=""
		for (i=0;i<message[i_message].length-1-i_messagelength;i++) {
			messagestringend+="  "
		}
		var messagestring=message[i_message].substring(0, i_messagelength)+messagestringend
		document.getElementById('textpathid').string=messagestring
		var timer=setTimeout("tick()",50)
		i_messagelength++
	}
	else {
		clearTimeout(timer)
		i_messagelength=0
		i_message++
		i_imgsrc++	
		i_color++	
		var timer=setTimeout("changeform()",pause)
	}
	
}

if (ie) {
	document.write('<div id="preloadimages" style="position:absolute;left:-5px;top:-5px;visibility:hidden">')
	for (i=0;i<=imgsrc.length-1;i++) {
		document.write('<img src="'+imgsrc[i]+'" name="n'+i+'" width=1 height=1>')
	}
	document.write('</div>')
	document.write('<div id="roofid" style="position:absolute;left:0px;top:0px;width:'+outerwidth+'px;height:'+innerheight+'px;overflow:hidden;">')
	document.write('<v:curve id="tc" style="position:relative;width:'+innerwidth+'px;height:'+innerheight+'px;" from="0px 0px" to="'+innerwidth+'px 0px" control1="'+control1_x+'px '+archeight+'px" control2="'+control2_x+'px '+archeight+'px">')
	document.write('<v:shadow on="t" opacity="'+strengthopacity+'"/>')
	document.write('<v:stroke id="strokeid" weight="'+strkweight+'pt" color="'+color[i_color]+'"/>')
	document.write('<v:fill id="fillid" on="True" opacity="'+strengthopacity+'" opacity2="'+strengthopacity+'" alignshape="False" type="tile" src="'+imgsrc[0]+'"/>')
	document.write('<v:path textpathok="t"/>')
	document.write('<v:textpath id="textpathid" on="t" id="mytp" style="font-family:\'Arial Black\'; " fitpath="t" string=""/>')
	document.write('</v:curve>')
	document.write('</div>')
	
	window.onload=initcurveticker
}

</script>

Step 3: Go to the top of the script and configure messages, colors, tile-images and strength of opacity.