Menu
Hello, I Someone told me this can be down using javascript. Can anyone just give me the basic on how to make a Image Text Generator. What I mean is, like this [url]http://www.splogger.com/habbotext/
so I have a input textbox so how do I make it take that information then get the corrisponding image (a.gif b.gif c.gif etc…) then disply them.
[size=1]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>untitled</title>
<script type="text/javascript">
<!--
function disp() {
text = "abcd"; // Get the text from the <input>
letters = text.split(''); // put the letters into an array
var imgStr = ""; //declare a variable for the image string <br/>
for (i in letters) { // loop though all the letters to build an image string
imgStr += '<img src="' +letters[i]+ '.gif">'; // Construct the string
}
document.getElementById('name').innerHTML = imgStr; // display the images in a <div id="name">
}
onload = disp;
//-->
</script>
</head>
<body>
<div id="name"></div>
</body>
</html>
[/size][i]Originally posted by Nedals [/i]
[B][/B][/QUOTE][size=1]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>untitled</title>
<script type="text/javascript">
<!--
function disp() {
text = "abcd"; // Get the text from the <input>
letters = text.split(''); // put the letters into an array
var imgStr = ""; //declare a variable for the image string <br/>
for (i in letters) { // loop though all the letters to build an image string
imgStr += '<img src="' +letters[i]+ '.gif">'; // Construct the string
}
document.getElementById('name').innerHTML = imgStr; // display the images in a <div id="name">
}
onload = disp;
//-->
</script>
</head>
<body>
<div id="name"></div>
</body>
</html>
[/size]
<i>
</i><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>untitled</title>
<script type="text/javascript">
<!--
function disp() {
text = form.myinput.value; // Get the text from the <input>
letters = text.split(''); // put the letters into an array
var imgStr = ""; //declare a variable for the image string <br/>
for (i in letters) { // loop though all the letters to build an image string
imgStr += '<img src="' +letters[i]+ '.gif">'; // Construct the string
}
document.getElementById('name').innerHTML = imgStr; // display the images in a <div id="name">
}
onload = disp;
//-->
</script>
</head>
<body>
<div id="name"></div>
</body>
</html>
<i>
</i><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>untitled</title>
<script type="text/javascript">
<!--
function disp() {
text = document.inputbox.myinput.value; // Get the text from the <input>
letters = text.split(''); // put the letters into an array
var imgStr = ""; //declare a variable for the image string <br/>
for (i in letters) { // loop though all the letters to build an image string
imgStr += '<img src="' +letters[i]+ '.gif">'; // Construct the string
}
document.getElementById('name').innerHTML = imgStr; // display the images in a <div id="name">
}
onload = disp;
//-->
</script>
</head>
<body>
<input type="text" name="inputbox" size="20"/> <BUTTON TYPE=SUBMIT onclick = "return disp(document.inputbox.myinput.value)"> Make Habbo Font </button>
</body>
</html>
[size=1]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>untitled</title>
<script type="text/javascript">
<!--
function disp(text) { // parse <input> data
var letters = text.split(''); // put the letters into an array
var imgStr = ""; //declare a variable for the image string <br/>
for (var i in letters) { // loop though all the letters to build an image string
imgStr += '<img src="' +letters[i]+ '.gif">'; // Construct the string
}
document.getElementById('name').innerHTML = imgStr; // display the images in a <div id="name">
return false; <br/>
}
//-->
</script>
</head>
<body>
<form name="myform" action="">
<input type="text" name="myinput" size="20"><br> <!-- that trailing / is only needed for xhtml -->
<input type="button" value="Make Habbo Font" onclick="return disp(document.myform.myinput.value)">
</form>
<div id="name"></div> <!-- this is needed to display the graphic text -->
</body>
</html>
[/size]But I obviously can't save somthing as .gif for the space. ?I have no idea what Pixel-Artist is talking about. What are you trying to do?
EDIT: I found a way around the space.[/QUOTE]
I have no idea what Pixel-Artist is talking about. What are you trying to do?
If you want to get rid of any spaces that may be entered, use a RegEx to remove them, or add an alert to have the user remove them.[/QUOTE]
<i>
</i>for (var i in letters) { // loop though all the letters to build an image string
var imgname = (letters[i] && letters[i]!=' ') ? letters[i] : 'sp';
imgStr += '<img src="' +imgname+ '.png">'; // Construct the string
}
0.1.9 — BETA 5.16