Letters to images

**lmm21** · 10-17-2013, 10:43 AM

I'm looking for a script which will allow a user to enter some letters and it will then return an image/s which are specific to that letter. Is there something out there which can do this? if not, can some one point me in the right direction on how to code such a thing? Ideally i'm looking for something ithout the use of a database. The images would be stored on the web so will be called from a web location.

Thanks in advance

**jscheuer1** · 10-17-2013, 12:33 PM

Assuming you own the rights to these images or they're in the public domain, and they're in a folder or a few folders that you know where they are -

What would be the rule(s). What letters would retrieve what images? How would that be determined? Would it be some sort of autocomplete? Conceivably the names of the images could be retrieved using server side code that looks in a specific folder or folders. But, if you want to search the web for images, use Google.

Once the names are retrieved, which could be fresh each time the page loads so as to allow for changes to the contents of these folders. the names could be used as the list for a javascript powered autocomplete text input in a form that when submitted could show you the image.

But before I go researching/writing the particulars of such a thing - is that what you have in mind, or something else? Do you have a host with server side code available? Preferably PHP, but I think I have some asp code for finding images in folders around here somewhere.

**lmm21** · 10-17-2013, 01:45 PM

Hi John,

Thank you for the reply. These images would be from our own image bank. Each letter of the alphabet would have an image assigned to it. When a combination of letters is entered, the user will press a button which will bring back the images associated with those letters. We're planning to run this on magento and I've been looking for a magento extension which might do this but can't seem to find one anywhere which is why we're looking at trying to get it developed ourselves, but haven't really got a clue where to start.

**jscheuer1** · 10-17-2013, 03:23 PM

So if I enter xyz I could get:

Building_C.jpg

all depending upon what was assigned to xyz?

Is there any logic between the letters and the images they bring up? Or would it have to be setup?

**vwphillips** · 10-17-2013, 04:05 PM

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>

**jscheuer1** · 10-17-2013, 05:28 PM

My server doesn't have PHP available so I used my localhost which does to generate the file list from one folder that's close to a folder on my host, edited the resulting object and array to match that folder and I used jQuery autocomplete to handle the auto completion duties. It will only suggest items from the list so use something like i or 1 or 0. Demo:

http://home.comcast.net/~jscheuer1/s...e/keyimage.htm

If you like the idea, it can be setup to use PHP (if available on your host) to grab the images from your folders on that host and use them for the file list.

If you try to view an item not on the list, you will get an alert asking you to only use images on the list.