God is our refuge and strength
a very present help in trouble. Ps.46:1
Code for Curve Ticker
Step 1.Paste the following code in to the head section of your webpage
<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v"/>
<style>
v\:* { behavior: url(#default#VML); }
</style>
Step 2 Paste the following right above the </body> tag of your webpage(almost at the bottom of your webpage)
<script>
// CREDITS:
// Curve Ticker with Image-Tiles
// By Peter Gehrig
// Copyright (c) 2003 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.24fun.com
// info@24fun.com
// 10/21/2003
// 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
// CONFIGURATION:
// Go to http://www.24fun.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