Link to home
Start Free TrialLog in
Avatar of whos_wee_dug
whos_wee_dug

asked on

Creating a combobox with images

Hi there,

I'm looking to have a combo box (drop down box) which contains a list of smiley faces which the users on my site can select.  When they select a smiley from the combo box the smiley is put into the corresponding message textbox below - note: i don't expect the picture to be inserted, just the smiley is ASCII e.g. :-)

Has anyone got a solution for this?  I'm looking for some code, not links for the 500 points to be given.

Thanx in advance,

Colin
Avatar of whos_wee_dug
whos_wee_dug

ASKER

Oh, It doesn't nessasarily need to be written in php, my site is primarily php but javascript, xhtml, xml anything like these are perfectly acceptable.

Cheers,

Colin.
It is possible to do this using CSS styles but it's only supported by Mozilla and very recent versions of Netscape apparently. It's probably going to be a lot easier just to have a small table above, below or to the side of your textarea with all your smileys in.

If you want to do it that way...

Example...

Insert your images on your page like this...

<a name="emoticon" href style="cursor:hand" onclick="return InsertText('[:)]')"><img src="gfx/smilies/icon_smile.gif" width="15" height="15"></a>      
<a name="emoticon" href style="cursor:hand" onclick="return InsertText('[:]]')"><img src="gfx/smilies/icon_biggrin.gif" width="15" height="15"></a>      
<a name="emoticon" href style="cursor:hand" onclick="return InsertText('[:>]')"><img src="gfx/smilies/icon_cheesygrin.gif" width="15" height="15"></a>

The ASCII symbol you are using for each one goes in InsertText('HERE'). The style="cursor:hand" bit just changes the cursor to the little hand like it does over a link so the user knows they can do something by clicking on the image. Oh, and make sure they are all called the same thing (in the above example it's emoticon).

And in the head section of your page put...

<script language="javascript">
<!--
var Submitted = false;            
var subject = true;
function InsertText( text )
{
      if (Submitted) return false;
      var TextArea = document.form1.Message;     <<----------- Replace Message with the name of your textarea!
      if (TextArea)
      {
            TextArea.value += text;
            TextArea.focus();
      }
      return false;
}
//-->
</script>

So now when a user clicks on one of your smileys then the appropriate ASCII is entered into the text area at the current cursor position.

Hope that helps!      
Hey Reapz,

Thanks for the fast response.  I like your solution and I might use it if no one else can suggest an exact solution to my problem, if I do use your option then I'll give you the points.

In the mean time I'll wait and see what other alternatives i have.

Cheers,

Colin
I have another solution, give me 10 minutes to put all together and upload it to my server... :)
I have made an example for you using a library, and uploaded it to my website, the only thing left is to make a simple preloader (not necesary but fine) of the smileys. Just tell me if that is what you need. The example: http://www.e-scola.org/combobox/
ASKER CERTIFIED SOLUTION
Avatar of MarcosBL
MarcosBL

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Nice 1 Marcos, that looks exactly like what I'm looking for!  Do you have any idea how compatiable it is with various browsers?  I'm on IE 6 and it looks great, I'll check it on Mozilla later tonight on my unix box but will it be compatible with IE4, IE5 and Netscape?  It's critical because my site will attract a varied audience.

I'm gonna try out your code on my site just now, if you can advise me on the compatibility issues (a rough idea) then I'll give you the points.

Thanks very much,

Colin.
It should be very compatible (no one is 100%) because just uses divs and mouse events.

No idea, i don't have anything to test other than my IE5. Anyway... my personal website have had up to 100,000 unique visits a day, with a 98% of Internet Explorer 6 & 5 users... so... the bigest part of the audience will be covered.

For the other... you can always check browser version and show a simple combo if not IE. Only a very little part of the users will see that normal combo, and "extrange browser users" will not be surprised of it. : )
Most browsers pretend to be IE that's why stats pages always say 98-99% IE users. :)
Thanks for everything Reapz, it's working and looking great!  I'm not going to worry to much about the compatibility (not as much as I was a few days ago) because its not a critical feature of my website.  

Just one thing, is there any way that the combobox's width could be changed?  It could do with being narrower.  I had a look at the code and couldn't work it out, if you can't change the width easily don't worry too much about it though.

Cheers,

Colin.
For the width take a look in the css file, for example:

.combo-input  {
      border:                  1px solid rgb(120,172,255) !important;
      width:                  138px !important;
      vertical-align:      baseline;
}

There you can change the visual apperance of the combo. And sorry for the bad english, i'm spanish :)
Ah, right, I looked everywhere but that file!  Thanks for your help, I had no trouble understanding what you were saying, your english is  v. good!

Cheers,

Colin