Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Nov 2004
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Making a script that will swap text for images.

    Hi everyone. I would like to use a script that would swap out any text on my site and replace it with images that are the same text (for example, the letter 'm' would be replaced with an image that has the letter 'm' on it.) I know that it can be done, because I've seen some pages that have done so quite well. I'm just not really good at scripting, so I'm at a complete loss.

    If you're not sure what I mean though, I have what I would like it to look like on my page at www.fullarticulation.net The images are up there, but it's only because I had to import them in one letter at a time.. and it's just a real pain in the neck =P

    If anyone can help out with this, I would greatly appreciate it.

    Also, would the images need any special naming convention? Right now I have the uppercase and lowercase in separate folders, with special characters named 'period, comma, etc'

    Thanks,
    - Adam
    Last edited by reckless ronin; 11-13-2004 at 03:14 AM.

  • #2
    fci
    fci is offline
    Senior Coder
    Join Date
    Aug 2004
    Location
    Twin Cities
    Posts
    1,345
    Thanks
    0
    Thanked 0 Times in 0 Posts
    actually, I was going to write something similar to this for something I was going to do. If no one else volunteers and you're patient I'll get around to doing it within the next few days.

    Could you post all the letters / characters in a zip file? I don't have any letter images. you can pm them to me if you want.
    Last edited by fci; 11-13-2004 at 03:54 AM.

  • #3
    Senior Coder
    Join Date
    Jul 2004
    Location
    New Zealand
    Posts
    1,315
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Code:
    str = str.replace(/([a-zA-Z])/i,"<img src=\"/images/$1.png\" alt=\"$1\">");
    Untested.

  • #4
    fci
    fci is offline
    Senior Coder
    Join Date
    Aug 2004
    Location
    Twin Cities
    Posts
    1,345
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Code:
    <script>
    function translation()
    {
        this.src     = 'source';
        this.trans   = 'translation';
        this.preview = 'preview';
    
        this.path  = { lower    : 'lower',
                       upper    : 'caps',
                       number   : 'number',
                       punct    : 'punctuation'
                     };
    
        this.punctuation = { period:        'period',
                             less_than:     'lt',
                             greater_than:  'gt',
                             apostrophe:    'apost',
                             at_sign:       'at',
                             semicolon:     'semicolon',
                             hyphen:        'dash',
                             bracket_left:  'brack-l',
                             bracket_right: 'brack-r',
                             comma:         'comma',
                             exclamation:   'exclam',
                             forward_slash: 'slash',
                             question_mark: 'quest'
                           }
        
        this.ext   = 'gif';
        this.spacer= '&nbsp;';
        this.img   = function(str)
        {
            return('<img src="' + str + '">');
        };
    
        this.translate = function()
        {
            var path, chara, punct;
    
            var trans = document.getElementById(this.trans);
            var str   = document.getElementById(this.src).value;
            var len   = str.length;
            for (var i=0; i<len; i++) {
                chara = str.charAt(i);
                
                switch (true) {
                    case /[a-z]/.test(chara) :
                        path = this.path.lower + '/' + chara + '.' + this.ext;
                        path = this.img(path);
                    break;
                    case / /.test(chara) :
                        path = this.spacer;
                    break;
                    case /[A-Z]/.test(chara) :
                        path = this.path.upper + '/' + chara.toLowerCase() + '.' + this.ext;
                        path = this.img(path);
                    break;
                    case /(\n|\r|\r\n)/.test(chara) :
                        path = "<br />";
                    break;
                    case /[0-9]/.test(chara) :
                        path = this.path.number + '/' + chara + '.' + this.ext;
                        path = this.img(path);
                    break;
                    case /[\'\[\];-<>.\/\\@,!\?]/.test(chara) :
                        switch (chara) {
                            case '\'' : punct = this.punctuation.apostrophe; break;
                            case '[' :  punct = this.punctuation.bracket_left; break;
                            case ']' :  punct = this.punctuation.bracket_right; break;
                            case ';' :  punct = this.punctuation.semicolon; break;
                            case '-' :  punct = this.punctuation.hyphen; break;
                            case '<' :  punct = this.punctuation.greater_than; break;
                            case '>' :  punct = this.punctuation.less_than; break;
                            case '.' :  punct = this.punctuation.period; break;
                            case '/' :  punct = this.punctuation.forward_slash; break;
                            case '@' :  punct = this.punctuation.at_sign; break;
                            case ',' :  punct = this.punctuation.comma; break;
                            case '!' :  punct = this.punctuation.exclamation; break;
                            case '?' :  punct = this.punctuation.question_mark; break;
                        }
                        path = this.path.punct + '/' + punct + '.' + this.ext;
                        path = this.img(path);
                    break;
                    default : path = undefined; break;
                }
                trans.value +=  path;
            }
            var prev = document.getElementById(this.preview);
            prev.innerHTML = ''
            prev.innerHTML = trans.value;
        };
    }
    
    var trans = new translation();
    /* 
    //change path
    trans.lower = FOLDER_NAME;
    trans.upper = FOLDER_NAME;
    trans.punct = FOLDER_NAME;
    trans.number= FOLDER_NAME;
    
    */
    
    
    </script>
    
    <textarea rows="20" cols="50" id="source">
    '
    </textarea>
    
    <input type="button" value="Translate" onClick="trans.translate()">
    
    <textarea rows="20" cols="50" id="translation"></textarea>
    <div id="preview" style="background-color:#CCCCCC"></div>
    this allows you to use a folder setup... Since you didn't do all characters, there will be some 'undefined' images. I probably should've made it easier to add new punctuation items.. oh well. btw, untested in IE since I don't have it. all punctuation is in the 'punctuation' folder.

  • #5
    New to the CF scene
    Join Date
    Nov 2004
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey thanks a bunch everyone. I will test these out and let you know how they work.


  •  

    Posting Permissions

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