Solved

Creating a combobox with images

Posted on 2004-03-28
12
299 Views
Last Modified: 2012-05-04
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
0
Comment
Question by:whos_wee_dug
  • 5
  • 5
  • 2
12 Comments
 

Author Comment

by:whos_wee_dug
ID: 10698995
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.
0
 
LVL 6

Expert Comment

by:Reapz
ID: 10699218
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!      
0
 

Author Comment

by:whos_wee_dug
ID: 10700362
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
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
LVL 2

Expert Comment

by:MarcosBL
ID: 10702261
I have another solution, give me 10 minutes to put all together and upload it to my server... :)
0
 
LVL 2

Expert Comment

by:MarcosBL
ID: 10702426
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/
0
 
LVL 2

Accepted Solution

by:
MarcosBL earned 500 total points
ID: 10704579
Server down.. X) Sorry.. try here : http://www.cfutura.com/~akb/
0
 

Author Comment

by:whos_wee_dug
ID: 10706704
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.
0
 
LVL 2

Expert Comment

by:MarcosBL
ID: 10711311
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. : )
0
 
LVL 6

Expert Comment

by:Reapz
ID: 10711627
Most browsers pretend to be IE that's why stats pages always say 98-99% IE users. :)
0
 

Author Comment

by:whos_wee_dug
ID: 10719740
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.
0
 
LVL 2

Expert Comment

by:MarcosBL
ID: 10721503
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 :)
0
 

Author Comment

by:whos_wee_dug
ID: 10723000
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
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article will explain how to display the first page of your Microsoft Word documents (e.g. .doc, .docx, etc...) as images in a web page programatically. I have scoured the web on a way to do this unsuccessfully. The goal is to produce something …
Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question