Text Effects

<body topmargin=0 leftmargin=0 marginheight=0 marginwidth=0> <table cellpadding=0 cellspacing=0 border=0><tr> <td valign="top" colspan=2 height=120 BGCOLOR="#003366" TEXT="#F7F7FF" bgproperties="fixed" background="8a000781dkcfqa.jpg"> <bR> <div> </div> </td> </tr><tr> <td valign="top" width=180 BGCOLOR="#FFFFFF" TEXT="#080000" bgproperties="fixed" background="84bc8253.jpg"> <div> <B> <TABLE BORDER="4" CELLPADDING="3" CELLSPACING="3" WIDTH="164" BORDERCOLORLIGHT="#FFFFFF" BORDERCOLORDARK="#FFFFFF" FRAME="BOX" RULES="ALL" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP BGCOLOR=#003366 HEIGHT= 14 WIDTH="142"><div> <A HREF="index.htm" TARGET="_top" TITLE="Dinky Di Web Design">Home</A></div> </tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#003366 HEIGHT= 14 WIDTH="142"><div> <A HREF="about.htm" TARGET="_top" TITLE="About Us">About Dinky Di</A></div> </tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#003366 HEIGHT= 14 ><NOBR><div> <A HREF="about_design.htm" TARGET="_top" TITLE="About Web Design">About Web Design</A></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#003366 HEIGHT= 14 ><NOBR><div> <A HREF="need.htm" TARGET="_top" TITLE="Do I Need A Website ?">Do I need a Website ?</A></div> </NOBR></tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#003366 HEIGHT= 14 WIDTH="142"><div> <A HREF="start.htm" TARGET="_top" TITLE="Getting Started">Getting Started</A></div> </tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#003366 HEIGHT= 14 WIDTH="142"><div> <A HREF="design.htm" TARGET="_top" TITLE="Design Options"><B>Design Options</B></A></div> </tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#003366 HEIGHT= 14 WIDTH="142"><div> <A HREF="pricing.htm" TARGET="_top" TITLE="Pricing">Pricing</A></div> </tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#003366 HEIGHT= 14 WIDTH="142"><div> <A HREF="portfolio.htm" TARGET="_top" TITLE="Portfolio">Portfolio</A></div> </tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#003366 HEIGHT= 14 WIDTH="142"><div> <A HREF="testimonials.htm" TARGET="_top" TITLE="Testimonials">Testimonials</A></div> </tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#003366 HEIGHT= 14 WIDTH="142"><div> <A HREF="faq.htm" TARGET="_top" TITLE="F.A.Q.s">F.A.Q's</A></div> </tD> </tR> <tR> <tD VALIGN=TOP BGCOLOR=#003366 HEIGHT= 14 WIDTH="142"><div> <A HREF="contact.htm" TARGET="_top" TITLE="Contact Us">Contact Us</A></div> </tD> </tR> </TABLE></B></div> <bR> <bR> <bR> </td> <td valign="top" height=360 width="100%" BGCOLOR="#FFFFFF" TEXT="#080000"> <div> <TABLE BORDER="0" CELLPADDING="2" CELLSPACING="1" WIDTH="157" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP BGCOLOR=#FFFFFF HEIGHT= 16 ><NOBR><div> <A HREF="design.htm" TARGET="_top" TITLE="Design Options">Back To Design Options</A></div> </NOBR></tD> </tR> </TABLE></div> <bR> <div> <TABLE BORDER="0" CELLPADDING="2" CELLSPACING="1" WIDTH="506" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=TOP BGCOLOR=#003366 HEIGHT= 16 WIDTH="500"><div> <B>SAMPLE TEXT EFFECTS</B></div> </tD> </tR> <tR> <tD VALIGN=CENTER BGCOLOR=#FFFFFF HEIGHT= 64 ><NOBR><div> Here is a couple of interesting text effect samples.</div> <div> There are plenty more - but these are just a few examples.</div> <div> This is a sample cursor trailer - your text can be used to follow the cursor.</div> <div> Also illustrated is a 2 colour highlighted text message.</div> </NOBR></tD> </tR> </TABLE></div> <bR> <div> <B> <SCRIPT> // CREDITS: // Cursor Trailer // By Urs Dudli and Peter Gehrig // Copyright (c) 2002 Peter Gehrig and Urs Dudli. 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 // 8/31/2002 // 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 your own text animation // with our new Text Factory. var text=new Array() text[0]="This is a sample of a cursor trailer" var textfont="Arial" var textfontsize=10 var textfontcolor="#6cb9ff" var textweight="bold" var textitalic="normal" var trailertext=text[0]+" " trailertext=trailertext.split("") var spanwidth=new Array() var ns4=document.layers?1:0 var ns6=document.getElementById&&!document.all?1:0 var ie=document.all?1:0 var x,y var flag=false var step=20 var windowheight=100 var windowwidth=100 var xpos=new Array() for (i=0;i<=trailertext.length-1;i++) { xpos[i]=-50 } var ypos=new Array() for (i=0;i<=trailertext.length-1;i++) { ypos[i]=-50 } function handlerMM(e){ if (ns4 || ns6) { x=e.pageX y=e.pageY } if (ie) { x=document.body.scrollLeft+event.clientX y=document.body.scrollTop+event.clientY } flag=true } function getpagesize() { if (ie) { windowheight=parseInt(document.body.clientHeight) windowwidth=parseInt(document.body.clientWidth) } if (ns4 || ns6) { windowheight=parseInt(window.innerHeight) windowwidth=parseInt(window.innerWidth) } makesnake() } function makesnake() { if (flag&& ie) { for (i=trailertext.length-1; i>=1; i--) { xpos[i]=xpos[i-1]+spanwidth[i-1] ypos[i]=ypos[i-1] } xpos[0]=x+step ypos[0]=y for (i=0; i<trailertext.length-1; i++) { var thisspan=eval("document.all.span"+(i)+".style") if (xpos[i]>(windowwidth-2*textfontsize)) { xpos[i]=-2000 } if (ypos[i]>((windowheight+document.body.scrollTop)-2*textfontsize)) { ypos[i]=-2000 } thisspan.posLeft=xpos[i] thisspan.posTop=ypos[i] } } if (flag&& ns6) { for (i=trailertext.length-1; i>=1; i--) { xpos[i]=xpos[i-1]+spanwidth[i-1] ypos[i]=ypos[i-1] } xpos[0]=x+step ypos[0]=y for (i=0; i<trailertext.length-1; i++) { var thisspan=eval("document.getElementById('span"+i+"').style") if (xpos[i]>(windowwidth-2*textfontsize)) { xpos[i]=-2000 } thisspan.left=xpos[i] thisspan.top=ypos[i] } } if (flag&& ns4) { for (i=trailertext.length-1; i>=1; i--) { xpos[i]=xpos[i-1]+spanwidth[i-1] ypos[i]=ypos[i-1] } xpos[0]=x+step ypos[0]=y for (i=0; i<trailertext.length-1; i++) { var thisspan = eval("document.span"+i) thisspan.left=parseInt(xpos[i]) thisspan.top=parseInt(ypos[i]) } } var timer=setTimeout("makesnake()",10) } if (ie || ns6 || ns4) { document.write("<STYLE>") document.write(".spanstyle {") document.write("position:absolute;") document.write("visibility:visible;") document.write("top:-100px;") document.write("left:-100px;") document.write("font-family:"+textfont+";") document.write("color:"+textfontcolor+";") document.write("font-size:"+textfontsize+"pt;") document.write("font-weight:"+textweight+";") document.write("font-style:"+textitalic+";") document.write("}") document.write("</STYLE>") for (i=0;i<=trailertext.length-1;i++) { document.write("<span id='span"+i+"' class='spanstyle'>") document.write(trailertext[i]) document.write("</span>") if (ie) { var thisspan=eval("document.all.span"+i) spanwidth[i]=Math.round(parseInt(thisspan.offsetWidth)) if (spanwidth[i]==0) {spanwidth[i]=textfontsize} } if (ns6) { var thisspan=eval("document.getElementById('span"+i+"')") spanwidth[i]=Math.round(parseInt(thisspan.offsetWidth)) if (spanwidth[i]==0) {spanwidth[i]=textfontsize} } if (ns4) { var thisspan=eval("document.span"+i+".document") spanwidth[i]=Math.round(thisspan.width) if (spanwidth[i]==0) {spanwidth[i]=textfontsize} thisspan.clear() } } } if (ns4){ document.captureEvents(Event.MOUSEMOVE); } if (ie || ns6 || ns4) { document.onmousemove = handlerMM; window.onload=getpagesize } </script>  </B></div> <bR> <div> <B> <h2> <script language="JavaScript1.2"> var message="Welcome to Dinky Di Web Design!" var neonbasecolor="white" var neontextcolor="blue" var flashspeed=100 //in milliseconds var n=0 if (document.all||document.getElementById){ document.write('<font color="'+neonbasecolor+'">') for (m=0;m<message.length;m++) document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>') document.write('</font>') } else document.write(message) function crossref(number){ var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number) return crossobj } function neon(){ //Change all letters to base color if (n==0){ for (m=0;m<message.length;m++) //eval("document.all.neonlight"+m).style.color=neonbasecolor crossref(m).style.color=neonbasecolor } //cycle through and change individual letters to neon color crossref(n).style.color=neontextcolor if (n<message.length-1) n++ else{ n=0 clearInterval(flashing) setTimeout("beginneon()",1500) return } } function beginneon(){ if (document.all||document.getElementById) flashing=setInterval("neon()",flashspeed) } beginneon() </script> </h2>  </B></div> <bR> <div> <TABLE BORDER="0" CELLPADDING="2" CELLSPACING="1" WIDTH="124" BORDERCOLORLIGHT="#C0C0C0" BORDERCOLORDARK="#808080" FRAME="VOID" RULES="NONE" HSPACE="0" VSPACE="0" > <tR> <tD VALIGN=CENTER HEIGHT= 45 ><NOBR><div> <A HREF="albums.htm" TARGET="_top" TITLE="Photo Album"><IMG SRC="3aa22270.gif" border=0 width="34" height="39" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A></div> </NOBR></tD> <tD VALIGN=CENTER><NOBR><div> <A HREF="index.htm" TARGET="_top" TITLE="Dinky Di Web Design"><B>HOME</B></A></div> </NOBR></tD> <tD VALIGN=CENTER><NOBR><div> <A HREF="animations.htm" TARGET="_top" TITLE="Animations"><IMG SRC="3a822270.gif" border=0 width="34" height="39" ALIGN="BOTTOM" HSPACE="0" VSPACE="0"></A></div> </NOBR></tD> </tR> </TABLE></div> <bR> </td> </tr></table></body>