DHTML - JavaScript 3D Text Rotator Horizontal Rotation Code

DHTML - JavaScript 3D Text Rotator Horizontal Rotation Code
Rotate your messages in the center of the web page. Real 3D look and stunning picture filling. Add as many messages and pictures as you like. Easy configuration of messages, pictures, colors, size and vertical position. Requires Internet Explorer 5x/6x or higher. Brought to you by www.24fun.com

3D Text Rotator, vertical rotation
Click here to the view 3D Text Rotator with vertical rotation.

Configuration:

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

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

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

// Set the URLs of the pictures filling your letters
// You may add as many pictures as you like
var pic=new Array("pic1.jpg","pic2.jpg","pic3.jpg")

// Set the messages
// You may add as many messages as you like
var message=new Array("Do you love JavaScript?","Download more than 500 scripts","Be happy don't worry")

// Set the font
var fnt="Arial Black"

// Set the width of the message-box
var formwidth=800

// Set the color of the 3D-extrusion. HTML-values required
var fillcolor="#666666"

// Set the depth of the 3D-extrusion (pixels)
var backdepth=6

// Set the speed of rotation (higher means faster)
// Acceptable values are 1,2,5,10,25
var speed=10

// Set the opacity of the filling
// Accepteable values range from 0% to 100%
var opacity="100%"

// Set the fill-effect of the pictures
// Acepptable calues are "frame" or "tile" or "pattern"
var filltype="frame"

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

// Shall the script stop after displaying all messages?
// Set "true" or "false"
var stopafterdisplay=false

// Set the vertical position the the textrotator
// Set it to "middle" if you want it to be displayed in the middle of the page
// Set any pixel-value if you want it to be positioned absolutely
var postop=120

// Do not edit below this line
var circlemark=" "
var i_angle1=0
var i_pic=0
var i_message=0
var posleft=0
var pagewidth
var pageheight
var longestmessage=0
var emptyspace=" "
var flagstarted=false
pause*=1000

var opera=navigator.userAgent.match(/Opera/) 
var ie5=document.getElementById&&document.all&&!opera?1:0

for (i=0;i<=message.length-1;i++) {
	if (message[i].length>longestmessage) {
		longestmessage=message[i].length
	}
	longestmessage+=4
}

for (i=0;i<=message.length-1;i++) {
	var emptyspace=""
	var i_emptyspace=(longestmessage-message[i].length)/2
	for (ii=0;ii<=i_emptyspace;ii++) {
		emptyspace+=circlemark
	}
	message[i]=emptyspace+" "+message[i]+" "+emptyspace
}

function initform() {
	pagewidth=document.body.clientWidth
	pageheight=document.body.clientHeight
	posleft=(pagewidth-formwidth)/2
	if (postop=="middle") {
		postop=pageheight/2
	}
	document.getElementById('rectid').style.left=posleft
	document.getElementById('rectid').style.top=postop
	preload()
}
function preload() {
	var i_preload=0
	for (i=0;i<=pic.length-1;i++) {
		var imgref=eval("document.n"+i)
		if (imgref.complete) {i_preload++}
	}
	if (i_preload>=pic.length-1) {
		window.status=i_preload
		var timer=setTimeout("changeform()",pause)
	}
	else {
		var timer=setTimeout("preload()",50)
	}
}

function changeform() {
	i_angle1+=speed
	if (i_angle1==360) {
		pausenow()
	}
	else {
		if (i_angle1==250) {
			i_pic++
			i_message++
			if (i_pic>=pic.length) {i_pic=0}
			if (i_message>=message.length) {i_message=0}
			document.getElementById('fillid').src=pic[i_pic]
			document.getElementById('textpathid').string=message[i_message]
			flagstarted=true
		}
		document.getElementById('extrusionid').rotationangle=0+","+i_angle1
		if (stopafterdisplay && i_message==0 && flagstarted) {
			document.getElementById('textpathid').string=""
		}
		else {
			var timer=setTimeout("changeform()",20)
		}
	}
}

function pausenow() {
	i_angle1=0
	document.getElementById('extrusionid').rotationangle=0+","+i_angle1
	var timerendpause=setTimeout("changeform()",pause)
}

if (ie5) {
	document.write('<div id="preloadimages" style="position:absolute;left:-5px;top:-5px;visibility:hidden">')
	for (i=0;i<=pic.length-1;i++) {
		document.write('<img src="'+pic[i]+'" name="n'+i+'" width=1 height=1>')
	}
	document.write('</div>')
   	document.write('<v:curve id="rectid" strokeweight="2pt" style="position:absolute;" from="0,0" to="'+formwidth+',0.1">')
   	document.write('<v:extrusion id="extrusionid" on="true" type="perspective" color="'+fillcolor+'" backdepth="'+backdepth+'" diffusity="2.5" metal="true"/>')
 document.write('<v:fill id="fillid" opacity="'+opacity+'" color="'+fillcolor+'" type="'+filltype+'" src="'+pic[0]+'"/>')
	document.write('<v:path textpathok="t"/>')
	document.write('<v:textpath id="textpathid" on="t" style="font-family:\''+fnt+'\';" fitpath="t" string="'+message[i_message]+'"/>')
   	document.write('</v:curve>')
	window.onload=initform
   }
</script>

Step 3: Go to the top of the script and configure messages, URLs of pictures colors, strength of opacity and size.