SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29
  1. #1
    SitePoint Enthusiast nicolesnexus's Avatar
    Join Date
    Aug 2001
    Location
    Canada
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile script - display your name with pictures

    Hi All!
    Was wondering if someone could help me here.

    Basically the script I am looking for will allow the visitor to type their name in a field and when they hit the go button, their name is displayed with pictures. (that I have already selected to use, a picture for each letter)

    Is this possible?? and what script would this be?

    thanks

  2. #2
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What I'm thinking here, is that you'd need to create a string with all the 26 letters in the alphabet, and you'd need to go through it (in a for loop) character by character, to find out which letters the person typed...and then you'd need to display certain images, based on what characters were typed in.

    It would take some work...although I've never heard of a script like this before, maybe someone has and can provide a link.

  3. #3
    SitePoint Enthusiast nicolesnexus's Avatar
    Join Date
    Aug 2001
    Location
    Canada
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess something like that... lost as to where to start. I just need some direction.

  4. #4
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I gave it a shot, and whipped this up:

    Code:
    <html>
    <head>
    <script language="javascript">
    function checkAndDisplay()
    {
    var textbox = window.document.form1.textbox1.value;
    var alpha_string = "abcdefghijklmnopqrstuvwxyz ";
    for (var index = 0; index < alpha_string.length; index++)
    {
    var the_char = alpha_string.charAt(index);
    if (textbox.indexOf(the_char) != -1)
    {
     if (index == 26)
     {
      document.write('&nbsp;');
     }
     else if (index == 25)
     {
      document.write('<img src="image25.gif">');
     }
     else if (index == 24)
     {
      document.write('<img src="image24.gif">');
     }
     else if (index == 23)
     {
      document.write('<img src="image23.gif">');
     }
     else if (index == 22)
     {
      document.write('<img src="image22.gif">');
     }
     else if (index == 21)
     {
      document.write('<img src="image21.gif">');
     }
     else if (index == 20)
     {
      document.write('<img src="image20.gif">');
     }
     else if (index == 19)
     {
      document.write('<img src="image19.gif">');
     }
     else if (index == 18)
     {
      document.write('<img src="image18.gif">');
     }
     else if (index == 17)
     {
      document.write('<img src="image17.gif">');
     }
     else if (index == 16)
     {
      document.write('<img src="image16.gif">');
     }
     else if (index == 15)
     {
      document.write('<img src="image15.gif">');
     }
     else if (index == 14)
     {
      document.write('<img src="image14.gif">');
     }
     else if (index == 13)
     {
      document.write('<img src="image13.gif">');
     }
     else if (index == 12)
     {
      document.write('<img src="image12.gif">');
     }
     else if (index == 11)
     {
      document.write('<img src="image11.gif">');
     }
     else if (index == 10)
     {
      document.write('<img src="image10.gif">');
     }
     else if (index == 9)
     {
      document.write('<img src="image9.gif">');
     }
     else if (index == 8)
     {
      document.write('<img src="image8.gif">');
     }
     else if (index == 7)
     {
      document.write('<img src="image7.gif">');
     }
     else if (index == 6)
     {
      document.write('<img src="image6.gif">');
     }
     else if (index == 5)
     {
      document.write('<img src="image5.gif">');
     }
     else if (index == 4)
     {
      document.write('<img src="image4.gif">');
     }
     else if (index == 3)
     {
      document.write('<img src="image3.gif">');
     }
     else if (index == 2)
     {
      document.write('<img src="image2.gif">');
     }
     else if (index == 1)
     {
      document.write('<img src="image1.gif">');
     }
     else if (index == 0)
     {
      document.write('<img src="image0.gif">');
     }
    } // end of if-then statement
    } // end of for loop
    } // end of checkAndDisplay() function
    </script>
    </head>
    <body>
    <form name="form1" onSubmit="checkAndDisplay()">
    Name: >> <input type="text" name="textbox1" maxlength="8"> <BR>
    <input type="submit" value="Go">
    </form>
    </body>
    </html>
    It sort of works...the problem with it is that it doesn't display the image for the first letter in the text box, and sometimes doesn't display images in the order they were written in the text box...I don't have the time right now to go into extensive troubleshooting, but maybe this can help you visualize how you can do this...I'll most likely look into this again in a day or two though.

    The main problem with it is the alpha_string variable -- the one I scan through with a for loop...if you write "abe" into the text box, the images will display fine and in order...but if you write in a name like "Josh", the for loop will go through the string in alphabetical order and it isn't able to bounce around the string to find every character the user wrote.

  5. #5
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    CA
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <script>
    function alpha() {
    this.a = "a.gif"; this.A = "A.gif";
    this.b = "b.gif"; this.B = "B.gif";
    this.c = "c.gif"; this.C = "C.gif";
    this.d = "d.gif"; this.D = "D.gif";
    this.e = "e.gif"; this.E = "E.gif";
    ..and so on until
    this.z = "z.gif"; this.Z = "Z.gif";

    this.arrTransposed = new Array();
    this.transpose = transpose;
    return this;
    }
    var objAlpha = new alpha();

    function transpose(strName) {
    if (typeof(strName) != "string") return;

    //split into first, last, middle names
    var arrNames = strName.split(" ");
    for (var j=0; j<arrNames.length; j++) {
    //split each name into letters
    var arrLetters = String(arrNames[j]).split();

    for (var i=0; i<arrLetters.length; i++) {
    //make first letter uppercase
    arrLetters[i] = (i==0)?arrLetters[i].toUpperCase() : arrLetters[i].toLowerCase();
    //add the image path to the array
    this.arrTransposed[this.arrTransposed.length-1] = eval("this." + arrLetters[i]);
    }
    }
    //not crossbrowser compliant
    if (navigator.userAgent.indexOf("Microsoft") > -1) {
    document.all.div.innerHtml = "<img src='" + this.arrTransposed.join("' /><img src='") + "' />";
    }
    }
    </script>
    <div id="div" name="div">
    </div>
    <form name="frm" id="frm">
    <input type="text" id="name" name="name" value="" maxlength="50" />
    <input type="button" id="go" name="go" value="display name in images" onclick="objAlpha.transpose(this.form.name.value);" />
    </form>


    #-----
    this is completely untested code but the concept is sound...

  6. #6
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    CA
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    This one works perfectly.

    <script language="javascript" type="text/javascript"><!--
    function alpha() {
    this.a = "a.gif"; this.A = "A_upper.gif";
    this.b = "b.gif"; this.B = "B_upper.gif";
    this.c = "c.gif"; this.C = "C_upper.gif";
    this.d = "d.gif"; this.D = "D_upper.gif";
    this.e = "e.gif"; this.E = "E_upper.gif";

    this.z = "z.gif"; this.Z = "Z_upper.gif";

    this.arrTransposed = new Array();
    this.transpose = transpose;
    return this;
    }
    function transpose(strName) {
    if (typeof(strName) != "string") return;

    //split into first, last, middle names
    var arrNames = strName.split(" ");
    for (var j=0; j<arrNames.length {

    //split each name into letters
    var arrLetters = arrNames[j].split("");

    for (var i=0; i<arrLetters.length; i++) {
    //make first letter uppercase
    // arrLetters[i] = new String(arrLetters[i]);
    arrLetters[i] = (i==0) ? arrLetters[i].toUpperCase() : arrLetters[i].toLowerCase();
    //add the image path to the array
    this.arrTransposed[this.arrTransposed.length] = eval("this." + arrLetters[i]);
    }
    if( ++j < arrNames.length) this.arrTransposed[this.arrTransposed.length] = "space.gif";
    }

    var imgstring = "<im" + "g src='" + this.arrTransposed.join("' alt='name'/><img src='") + "' />";
    alert(imgstring);
    document.all.divName.innerHTML = imgstring;
    return true;

    }

    var objAlpha = new alpha();

    //-->
    </script>
    <div id="divName" name="divName"></div>
    <form name="frm" id="frm" action="#" method="post" onsubmit="return false;">
    <input type="text" id="name" name="name" value="" maxlength="50" />
    <input type="button" id="go" name="go" value="display name in images" onclick="objAlpha.transpose(this.form.name.value);" />
    </form>


    #---
    this works perfectly.

  7. #7
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    CA
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sorry about the smiley. Use this.

    <script language="javascript" type="text/javascript"><!--
    function alpha() {
    this.a = "a.gif"; this.A = "A_upper.gif";
    this.b = "b.gif"; this.B = "B_upper.gif";
    this.c = "c.gif"; this.C = "C_upper.gif";
    this.d = "d.gif"; this.D = "D_upper.gif";
    this.e = "e.gif"; this.E = "E_upper.gif";

    this.z = "z.gif"; this.Z = "Z_upper.gif";

    this.arrTransposed = new Array();
    this.transpose = transpose;
    return this;
    }
    function transpose(strName) {
    if (typeof(strName) != "string") return;

    //split into first, last, middle names
    var arrNames = strName.split(" ");
    for (var j=0; j<arrNames.length;) {

    //split each name into letters
    var arrLetters = arrNames[j].split("");

    for (var i=0; i<arrLetters.length; i++) {
    //make first letter uppercase
    // arrLetters[i] = new String(arrLetters[i]);
    arrLetters[i] = (i==0) ? arrLetters[i].toUpperCase() : arrLetters[i].toLowerCase();
    //add the image path to the array
    this.arrTransposed[this.arrTransposed.length] = eval("this." + arrLetters[i]);
    }
    if( ++j < arrNames.length) this.arrTransposed[this.arrTransposed.length] = "space.gif";
    }

    var imgstring = "<im" + "g src='" + this.arrTransposed.join("' alt='name'/><img src='") + "' />";
    alert(imgstring);
    document.all.divName.innerHTML = imgstring;
    return true;

    }

    var objAlpha = new alpha();

    //-->
    </script>
    <div id="divName" name="divName"></div>
    <form name="frm" id="frm" action="#" method="post" onsubmit="return false;">
    <input type="text" id="name" name="name" value="" maxlength="50" />
    <input type="button" id="go" name="go" value="display name in images" onclick="objAlpha.transpose(this.form.name.value);" />
    </form>


    #---
    this works perfectly.

  8. #8
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Congrats, Cha Cha!!!

    That code sure does work...btw, there's a "disable smilies in this post" checkbox on the "advanced" post page...I know how aggravating it is to see smilies in your code, so I always check that checkbox whenever I'm posting something with code in it.

  9. #9
    SitePoint Addict
    Join Date
    Mar 2003
    Location
    CA
    Posts
    210
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    now

    thanks :)

    Yeah, and I guess I should test first too, so I don't have to post 100 times.

    Sorry folks.

  10. #10
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ChaCha
    thanks

    Yeah, and I guess I should test first too, so I don't have to post 100 times.

    Sorry folks.
    Lol yes, testing first is good...

    Did you get my PM?

  11. #11
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oh man, I wrote an AWESOME script to do this!!! (This is even better than yours, Cha Cha, lol).

    You can download it here (I uploaded it in a zip because I got images, too...I made space and period images as well and packaged them in).

    http://www.html4me.com/ftpdl/imgScript.zip

    It does not work in Netscape 7 (just tested it), but it works in Opera 7 (and IE 6 of course).

    This script is DA BOMB!!!! Woo hoo, I'm so proud of myself...

  12. #12
    SitePoint Enthusiast nicolesnexus's Avatar
    Join Date
    Aug 2001
    Location
    Canada
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much.. I will try it out now. It is a great script.. inspired by me I hope...

  13. #13
    SitePoint Enthusiast nicolesnexus's Avatar
    Join Date
    Aug 2001
    Location
    Canada
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I LOVE YOU gregc!
    You are the BEST!!!
    Thanks So Much!!

  14. #14
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hehehe, you're welcome...Cha Cha helped too though...

  15. #15
    SitePoint Enthusiast nicolesnexus's Avatar
    Join Date
    Aug 2001
    Location
    Canada
    Posts
    63
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    oh yes.. don't want to leave ChaCha out!

    Thanks to the both of you!!!

    The script works really well. It is going to be a big hit on my other site.

    Thanks again!
    signature

  16. #16
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay, since you're going to put it on your site, could you please add these lines to the script?

    <!-- Written by: Greg Cook -->
    <!-- Website: http://www.html4me.com -->
    <!-- Email: host@html4me.com -->

    Just so I can take credit for what I wrote.

  17. #17
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The latest version of the script...preloads all the images for the script before the script runs so the images display instantaneously...also added period and exclamation point images, it's basically all around a much better script now.

    http://www.html4me.com/imgScript/imgScript.zip

    And here's the working one:

    http://www.html4me.com/imgScript/wri...in_images.html

  18. #18
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    won't a simple script like,

    function xchange(){
    i=input;iL=input.length
    for(n=0;n<iL;n++)
    letter=i.charAt(n)
    document.write('<img src="+letter+".gif>')

    work if your letters are saved as letter.gif

    wont something like that work.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  19. #19
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code:
    document.write("<img src="+letter+".gif>")
    Last edited by Markdidj; Apr 18, 2003 at 23:50. Reason: wrong symbols
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  20. #20
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    seen gregs now........works the similar way......
    Don't make things harder by creating arrays when you don't need to. Even if you wanted caps, you could add
    if (letter is caps) letter=+"cap"
    (what is the code to see if letter is a capital?)
    then the image to show would still be letter+".gif"; eg "acap.gif"; "bcap.gif" etc
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  21. #21
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Markdidj
    won't a simple script like,

    function xchange(){
    i=input;iL=input.length
    for(n=0;n<iL;n++)
    letter=i.charAt(n)
    document.write('<img src="+letter+".gif>')

    work if your letters are saved as letter.gif

    wont something like that work.
    I'm almost positive that wouldn't work. In my experience, document.write() doesn't work that well when used dynamically (with a loop), which is why I opted to use the innerHTML properthy instead. You can try editing my script to implement your function, to see if it works if you want.

    But stop ****ting on my script, I worked hard on it and it's an EXCELLENT piece of work.

    I hate it when people like you and beetle only give negative input, saying that too much namespace was used or some stupid **** like that. If you don't have anything constructive to say, just back off. If you edit my script with simpler code and it still works the same, then I'd be interested in your input. Otherwise, I couldn't care less about what you think. Got it?

  22. #22
    SitePoint Addict
    Join Date
    Aug 2001
    Location
    Los Angeles, CA
    Posts
    346
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Markdidj
    seen gregs now........works the similar way......
    Don't make things harder by creating arrays when you don't need to. Even if you wanted caps, you could add
    if (letter is caps) letter=+"cap"
    (what is the code to see if letter is a capital?)
    then the image to show would still be letter+".gif"; eg "acap.gif"; "bcap.gif" etc
    I just convert all text in the textbox with the toLowercase() method, so the script always tries to display images like a.gif, b.gif, etc...and not images like I.gif. I don't have lowercase images, only uppercase images.

  23. #23
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Greg, I didn't write it for your sake. I write my little snippets to give others insperation, as I also draw some of my inspiration from here as well. If you find it useful, you find it useful. If you don't, you don't. Just because I write in a thread that you write in doesn't mean I think I'm better than you.

    If you want you can disagree with me, and explain why, but don't just give a daft response like that.

    I can see that using innerHTML would be better if doing it to the same page as document.write doesn't work after a page has loaded. (it will write it to a new page)
    I don't think there's a problem with it in a loop. But then I only use IE, if you know different, let me know, but you don't need to be aggressive about it.
    When I'm here, I usually have a thread of my own, which means I am deep in programming thought. If it is my short answers that your worried about, well I only want to be a sitePOINTer, not a siteWRITEr.

    What sort of problems arise with document.write in a loop? I haven't encountered any as yet.....

    Anyway gregc, you must remember we're all learning here. And haven't you been on for a while? Beetle has chilled out loads in the last few months.......
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  24. #24
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <head>
    <title>Write your name in images!</title>
    <Script language="JavaScript">
    divString=""
    function show() {
    nameString=document.getElementById("textbox1").value.toLowerCase();
    lettercount=nameString.length;
    for(i=0;i<lettercount;i++) {letter=nameString.charAt(i)
    divString+='<img src="'+letter+'.gif">' }
    document.getElementById("divTag").innerHTML=divString;
    divString="" }
    </script>
    </head>
    <body>
    <div id="divTag" style="height:53px;"></div><BR>
    <form name="form1">
    Name: >> <input type="text" name="textbox1" maxlength="50" onkeyup="show()">
    </form>
    </body>
    </html>
    Use that with gregs pics, will work onkeyup, so you can delete a letter if you wish. Also no need to submit. If you ask Beetle, he'll be able to finish it of with some regexp to stop it trying to show ','

    this ones short and fun..........
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  25. #25
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    more.........

    In the loop, after letter=nameString.charAt(i);
    you can add this....

    [code]
    if(letter==",") letter="comma"
    if(letter==".") letter="stop"
    if(letter=="!") letter="excla"

    and creat pics called comma.gif, stop.gif and excla.gif.....

    Thanks for the inspiration..........
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •