jQuery - textual input => image

[Charisma Bypass]

Here's one I can't get my head around;

I have a text input in a form.  When the user is typing in that box, I want images to appear as he is typing.

Imagine it's for a tshirt product, where the buyer can make a slogan to be printed on it.  As he is typing his slogan the letters appear on the tshirt as a visual representation.

Any ideas?  TIA

[samhs]

$("input").change(function () {
 $("#display").html("<div></div>"); //reset the contents of #display to be empty other than a <div>
 // look through the contents of the string and load each image accordingly
 tmpstring = $(this).val();
 for (var i=0;i<tmpstring.length;i++) {
   theletter = tmpstring.charAt(i);
   $("#display div").append("<img src='"+theletter+".gif' />");
 }
});

I've not tested this so it may be broken. You need an input and a div with an id of "display", plus a load of images a.gif, b.gif, c.gif etc etc. Not sure how you'd deal with uppercase letters, numbers or punctuation.

Also this isn't very bandwidth friendly - it loads the images again and again each time you change the word - so you change it from burt to burty and it reloads all the burt letters as well as the y. Just so you know.

HTH

[Charisma Bypass]

Why DDN is still a beautiful place!  Will test it out imminently.
Thank You Sam.

[samhs]

Hey - no worries. I hope it works for you.