www.webdeveloper.com
Results 1 to 6 of 6

Thread: Simple image swap based on text input

  1. #1
    Join Date
    Feb 2012
    Posts
    4

    Simple image swap based on text input

    Hi Im new to javascript and are trying to get a text input of 9 chars long to display on screen as it is typed. I have a script to restrict the input to thats entered however I am having trouble taking that input and swapping the characters with graphic files that represent the characters.

    so I have alphabet & number files named a - z & 1 - 0 respectivly ie "a.gif"
    etc.

    So I would like as you typed say "your name" to have your name display in a table or box.

    <!--webbot bot="Validation" B-Value-Required="TRUE" I-Maximum-Length="9"
    -->
    <input type= text name="txtName1" id="txtName1"
    onkeypress="return check(event)"
    size="9" " maxlength="9"


    External file
    function check(e) {
    var keynum
    var keychar
    var numcheck
    // For Internet Explorer
    if (window.event)
    {
    keynum = e.keyCode
    }
    // For Netscape/Firefox/Opera
    else if (e.which)
    {
    keynum = e.which
    }

    keychar = String.fromCharCode(keynum)

    //List of special characters you want to restrict

    if (keychar == "!" || keychar == "~" || keychar == "@" || keychar == "#" || keychar == "$" || keychar == "%" || keychar == "^" || keychar == "*" || keychar == "(" || keychar == ")" || keychar == "_" || keychar == "+" || keychar == "=" || keychar == "{" || keychar == "}" || keychar == "[" || keychar == "]" || keychar == ":" || keychar == ";" || keychar == "<" || keychar == ">" || keychar == "?" || keychar == "|")
    {return false;}
    else
    {
    return true;
    }
    }

    Hopefully someone can help me out there.

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,441

    Lightbulb Try this for me...

    The following is untested because I don't have a link to your images.
    Put this in same directory and let me know how it works,
    or provide a link to your image directory.

    Note: I compressed your keyboard key check function to be a little easier to understand.
    Code:
    <html>
    <head>
    <title> xfer2img </title>
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?p=1194938#post1194938
    
    function check(e) { 
      var keynum, keychar, numcheck;
      if (window.event) { keynum = e.keyCode; }   // For Internet Explorer 
      else if (e.which) { keynum = e.which; }     // For Netscape/Firefox/Opera 
      keychar = String.fromCharCode(keynum)
    
    //List of special characters you want to restrict 
      if ('!~@#$&#37;^*()_+={}[]:;<>?|'.indexOf(keychar) != -1) { return false; }
      return true;
    }
    function xfer2Img(str) {
      var tstr = '';
      for (var i=0; i<str.length; i++) {
        tstr += '<img src="'+str[i]+'.gif" alt="'+str[i]+'">';
      }
      document.getElementById('divArea').innerHTML = tstr; 
    }
    </script>
    
    <style type="text/css">
    
    </style>
    </head>
    <body>
    <!--webbot bot="Validation" B-Value-Required="TRUE" I-Maximum-Length="9" -->
    <input type= text name="txtName1" id="txtName1" size="9" " maxlength="9"
     onkeypress="return check(event)" onblur="xfer2Img(this.value)">
    <div id="divArea"></div>
    </body>
    </html>

  3. #3
    Join Date
    Feb 2012
    Posts
    4

    Smile Simple image swap based on text input

    Hi JMRKER,

    Thanks for your help & compressing the keyboard function.

    I was getting there but was going in circles.

    your solution comes up with an undefined.gif

    I also changed the onblur to onkeyup

    http://www.addstogether.com.au/image...a/xfer2img.htm


    I would also like to have multiple image directories say
    /images/alpha/font1/ .... /font2/ ... /font3/ ....
    and pass the path to the function

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,441

    Lightbulb

    Quote Originally Posted by adds View Post
    Hi JMRKER,

    Thanks for your help & compressing the keyboard function.

    I was getting there but was going in circles.

    your solution comes up with an undefined.gif

    I also changed the onblur to onkeyup

    http://www.addstogether.com.au/image...a/xfer2img.htm


    I would also like to have multiple image directories say
    /images/alpha/font1/ .... /font2/ ... /font3/ ....
    and pass the path to the function
    Undefined was probably because you did not put the script in the same directory as the images.
    I did not have the images to check out the script.

    You neglected to check to see if the user entered an upper case letter. Fixed that also.

    Added a font change radio button. They are all the same currently because you have given me
    only one font to test with. Change baseURL elements to reflect directory of new images.


    Code:
    <html>
    <head>
    <title> xfer2img </title>
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?p=1194938#post1194938
    
    function check(e) { 
      var keynum, keychar, numcheck;
      if (window.event) { keynum = e.keyCode; }   // For Internet Explorer 
      else if (e.which) { keynum = e.which; }     // For Netscape/Firefox/Opera 
      keychar = String.fromCharCode(keynum)
    
    //List of special characters you want to restrict 
      if ('!~@#$&#37;^*()_+={}[]:;<>?|'.indexOf(keychar) != -1) { return false; }
      return true;
    }
    var fontPointer = 0;
    var baseURL = [
      'http://www.addstogether.com.au/images/alpha/',
      'http://www.addstogether.com.au/images/alpha/',
      'http://www.addstogether.com.au/images/alpha/'
    ];
    
    function xfer2Img(str) {
      var tstr = '';
      for (var i=0; i<str.length; i++) {
        tstr += '<img src="'+baseURL[fontPointer]+str[i].toLowerCase()+'.gif" alt="'+str[i]+'">';
      }
      document.getElementById('divArea').innerHTML = tstr; 
    }
    </script>
    </head>
    <body onload="document.getElementById('txtName1').focus()">
    Font #: 
    <input type="radio" name="fnt" value="0" onclick="fontPointer='0'" checked> 1 
    <input type="radio" name="fnt" value="1" onclick="fontPointer='1'" > 2 
    <input type="radio" name="fnt" value="2" onclick="fontPointer='2'" > 3<br> 
    <!--webbot bot="Validation" B-Value-Required="TRUE" I-Maximum-Length="9" -->
    <input type= text name="txtName1" id="txtName1" size="9" " maxlength="9"
     onkeypress="return check(event)" onkeyup="xfer2Img(this.value)">
    <div id="divArea"></div>
    </body>
    </html>
    Last edited by JMRKER; 03-01-2012 at 11:29 AM.

  5. #5
    Join Date
    Feb 2012
    Posts
    4

    'Simple image swap based on text input'

    Hi,

    thanks it works in firefox but not IE 8.

    the .toLowerCase() doesn't change the text on screen but images still display in firefox.

    also .toLowerCase() cause error in IE8 and images still undefined.

    http://www.addstogether.com.au/xfer2img2.htm - firefox

    http://www.addstogether.com.au/xfer2img3.htm - IE (.toLowerCase() removed) - still undefined

    thanks in advance
    adds

  6. #6
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,441

    Exclamation

    Quote Originally Posted by adds View Post
    Hi,

    thanks it works in firefox but not IE 8.

    the .toLowerCase() doesn't change the text on screen but images still display in firefox.

    also .toLowerCase() cause error in IE8 and images still undefined.

    http://www.addstogether.com.au/xfer2img2.htm - firefox

    http://www.addstogether.com.au/xfer2img3.htm - IE (.toLowerCase() removed) - still undefined

    thanks in advance
    adds
    The .toLowerCase() was never intended to change the display on the sceen. It was put in to assure that the correct filename was chosen from the textbox input. It would not find a file named 'A.gif', only 'a.gif'.
    If you need the text box in lower case, that is an easy fix.
    Change the value of the textbox to lower case as the keys are entered in your check() function.

    I am unable to fully check the problem with the MSIE version at this time. I'll look at it more later.
    Two guesses at this time:
    1. You need to specify the <!DOCTYPE ...> tag
    2. Or possibly change to this:
    Code:
    function xfer2Img(str) {
      var tstr = '';
      var ch = '';
      for (var i=0; i<str.length; i++) {
        ch = str.charAt(i);  ch = ch.toLowerCase();
        tstr += '<img src="'+baseURL[fontPointer]+ch+'.gif" alt="'+c+'">';
      }
      document.getElementById('divArea').innerHTML = tstr; 
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles