...

View Full Version : Making a script that will swap text for images.



reckless ronin
11-13-2004, 03:12 AM
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

fci
11-13-2004, 03:48 AM
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.

hemebond
11-13-2004, 04:55 AM
str = str.replace(/([a-zA-Z])/i,"<img src=\"/images/$1.png\" alt=\"$1\">");Untested.

fci
11-13-2004, 05:29 AM
<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.

reckless ronin
11-13-2004, 06:00 AM
Hey thanks a bunch everyone. I will test these out and let you know how they work.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum