one way
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#letters IMG {
width:20px;height:20px;float:left;
}
/*]]>*/
</style><script type="text/javascript">
/*<![CDATA[*/
function zxcLetters(ip,id){
var o=zxcLetters[ip],s=document.getElementById(ip),obj=document.getElementById(id),src,i,img,z0=0;
if (o&&s&&obj){
var s=s.value.split('');
obj.innerHTML='';
for (;z0<s.length;z0++){
img=document.createElement('IMG');
i=o.letters.indexOf(s[z0]);
img.src=o.ary[i]&&o.ary[i].width>40?o.ary[i].src:'http://www.vicsjavascripts.org.uk/StdImages/Blank.gif';
obj.appendChild(img);
}
}
else {
o=zxcLetters[ip]={};
o.letters=id;
o.ary=id.split('');
for (;z0<o.ary.length;z0++){
src='http://www.vicsjavascripts.org.uk/StdImages/'+o.ary[z0]+'.gif';
o.ary[z0]=new Image();
o.ary[z0].src=src;
}
}
}
// i only have images for numbers
zxcLetters('ip','0123456789'); // preload the images
/*]]>*/
</script></head>
<body>
<input id="ip" name="" /> <input type="button" name="" value="TEST" onmouseup="zxcLetters('ip','letters');"/>
<div id="letters" ></div>
</body>
</html>
Bookmarks