Animated Signature Generator Script

@gailAug 09.2005

Does anyone know of a script that i could use on my site
where a visitor could type their name into a form and generate
an animated alphabet signature?

Thanks for your time ?

to post a comment

JavaScript

10 Comments(s) _↴

@vwphillipsAug 09.2005 — #what do you mean by animated

this is pritty naff

[CODE]
 <html>
 <head>
 <style>
 .pic {background-color: #FF0000;}
 </style>
 <script>
 
 var currImg = 0;
 var imgNum = 0;
 var Ary1=new Array();
 
 function moveImg(_e){
 if (imgNum<2){ return; }
 if(_e) {
 Ary1[currImg].style.top=_e.pageY;
 Ary1[currImg].style.left=_e.pageX+Ary1[currImg].os;
 }
 else {
 Ary1[currImg].style.top=event.y;
 Ary1[currImg].style.left=event.x+Ary1[currImg].os;
 }
 currImg=(currImg+1)%imgNum;
 }
 
 function initImg(txt){
 var i;
 for(i = 0;i < txt.length;i++) {
 Ary1[i]=document.createElement('DIV');
 Ary1[i].style.position='absolute';
 Ary1[i].style.width='50px';
 Ary1[i].style.height='20px';
 Ary1[i].os=(i*10+20);
 Ary1[i].appendChild(document.createTextNode(txt.charAt(i)));
 document.getElementsByTagName('BODY')[0].appendChild(Ary1[i]);
 }
 if (!document.all) document.captureEvents(Event.MOUSEMOVE)
 imgNum = Ary1.length;
 document.onmousemove=moveImg;
 }
 
 
 function Animate(obj){
 if (obj.value.length<2){ return; }
 for (i=0;i<Ary1.length;i++){
 document.getElementsByTagName('BODY')[0].removeChild(Ary1[i]);
 }
 initImg(obj.value);
 }
 
 </script>
 </head>
 <body>
 <center>Move your mouse - see the images move.</center>
 
 <input id=fred size=10  />
 <input type=button value=Animate onclick="Animate(document.getElementById('fred'));"   />
 
 
 
 </body>
 </html>
 [/CODE]

@Alon_C_Aug 09.2005 — #[B]Hereby an example you can use:[/B]

[CODE]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
 <html>
 <head><title>animated alphabet </title>
 <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=windows-1255">
 
 </head>
 <body  onLoad="x.focus();x.select();StartIt(0)" >
 
 <script  type="text/JavaScript" language="JavaScript1.2">
 <!--
 var size = 25;
 var Speed=2200  //in miliseconds
 
 
 var text = new Array()
 {
 text[0] = " ";
 }
 
 
 
 var k1 = 0;
 var s = 0;
 var v1 =0;
 var tel = 0;
 function breakIt(i,len)
 {
 return (size*Math.abs( Math.sin(i/(len/3.14))) );
 }
 
 function motor(p)
 {
 var output = "";
 for(w = 0;w < text[s].length - k1+1; w++)
 {
 q = breakIt(w/2 + p,16);
 if (q > size - 0.5)
 {k1++;}
 if (q < 5)
 {tel++;
 if (tel > 1)
 {
 tel = 0;
 if (v1 == 1)
 {
 v1 = 0;
 
 if ( s == text.length)
 {s = 0;}
 p = 0;
 if (window.loop)
 {clearInterval(loop)}
 loop = motor();
 }
 }
 }
 output += "<font color='lightgreen' style='font-size: "+ q +"pt'>" +text[s].substring(w,w+1)+ "</font>";
 }
 for(k=w;k<k1+w;k++)
 {
 output += "<font color='gold' style='font-size: " + size + "pt'>" +text[s].substring(k,k+1)+ "</font>";
 }
 iDx.innerHTML = output;
 }
 
 function StartIt(p){
 if (!document.all)
 return
 var loop = motor(p);
 if (window.time)
 {clearInterval(time)}
 if (k1 == text[s].length)
 {
 k1 = 0;
 v1 = 1;
 tel = 0;
 var time = setTimeout("StartIt(" +(p+1) + ")", Speed);
 }else
 {
 var time =setTimeout("StartIt(" +(p+1) + ")", 50);
 }
 
 }
 //-->
 </script>
 
 <font  face="David" >
 <div ID="iDx">
 </font></div>
 
 <input type=text id=x value='Enter your name and Click "Okay"' size=40 onchange="text[0]='Your name is: '+this.value">
 Okay
 </body>
 </html>
 [/CODE]

@gailauthorAug 09.2005 — #thank you for your replies ?

what i am trying to do is....

when a visitor types their name into a form,

example: g a i l

for each letter typed, an animated g.gif, a.gif, i.gif, l.gif

would appear above the input box.

is that what these scripts will do?

i hope this makes sense? ?

@Alon_C_Aug 09.2005 — #[I]So you need at least.. 26 gif(s) in EN, but.. what about other languages?[/I]

@JPnycAug 09.2005 — #Scripts cannot "generate" an animated gif, or any kind of gif, or any kind of image.

@gailauthorAug 09.2005 — #again, thank you for your replies ?

Alon C...i already have 29 gifs, (including a period, space and a hyphen),

that i would like to use....i'm not familiar with other languages ?

any suggestions would be appreciated.

JPnyc....if a script would not perform these actions,

what would you suggest? ?

thanks for your help.

@MongusAug 09.2005 — #Actually, JavaScript can generate XBM images (http://www.wolf5k.com/faq.html#2) although it would be a lot of work to do it that way.

Unfortunately, it looks like IE recently stopped allowing this type of image generation. ?

@JPnycAug 09.2005 — #If I understand what you're trying to do, the 1st thing you'd need is to have animated gifs for all the letters already. Then, you have to parse the contents of the text box to get individual characters, and you'll need to make an array of all 26 of the animated gifs, so that you can do a comparison with each character and pull the right gif for each letter. I'm sorry I don't have such a script written as an example.

@gailauthorAug 09.2005 — #yes, JPnyc...that does sound like what i'm trying to do.

as i said earlier, i do have all 29 gifs, (including space.gif,

hyphen.gif and period.gif), that i would like to use, i just

dont have the script necessary to perform the actions.

i have seen this done before, but i can't remember where,

or if it was even javascript....it may have been php?

if anyone knows of such a script or has an example,

it would be most appreciated.

thanks.

@artoAug 10.2005 — #Something like this?

[CODE]<html>
 <head>
 <script type="text/javascript">
 function showImages(e) {
 var i,name;
 
 document.getElementById('images').innerHTML='';
 for (i=0;i<e.value.length;i++) {
 switch (e.value.charAt(i).toLowerCase()) {
 case ' ': name='space'; break;
 case '-': name='hyphen'; break;
 case '.': name='period'; break;
 default: name=e.value.charAt(i).toLowerCase();
 }
 
 document.getElementById('images').innerHTML+='<img src="'+name+'.gif" alt="'+name+'">';
 }
 
 }
 </script>
 </head>
 
 <body>
 
 <div id="images"></div>
 
 Name: <input type="text" onkeyup="showImages(this)">
 
 </body>
 </html>[/CODE]

Arto

Also in #JavaScript _↴

identifying cells of a table How to pass an array from javascrip to java Loading logo

Success!

Help @gail spread the word by sharing this article on Twitter...

Tweet This

Animated Signature Generator Script

10 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Animated Signature Generator Script

10 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

10 Comments(s) _↴

Also in #JavaScript _↴