Images in HTML select form elements?

March 10, 2005 9:52 AM

Is it possible to have an HTML select form element display images for each choice rather than text?

From what I can tell, it's not. It seems someone would have a work-around, but I can't find it. I'd like the select element to display images, but return the filename when the form is submitted. The images are all tiny gifs and/or pngs sitting in a directory all to themselves. I'm programming in PHP & smarty. A javascript solution would be fine.

posted by ewagoner to computers & internet (5 comments total)

It's not possible with a standard select box. It would certainly be possible to create a DHTML facsimile of a select box which could include the images, but the practicaility of it would be dependent on the complexity of your application.

It would require a hidden field which is populated when an item in the list is selected (onclick="populateHiddenField("theValue");").

You're likely stuck with the select box, but if you're not, a group of radio buttons would give you less grief and return the same data.
posted by o2b at 10:04 AM on March 10, 2005

I found this, which appears to be an IE-only solution.
posted by patgas at 10:42 AM on March 10, 2005

You can try domapi which has a custom combobox that might suite your needs. Bt the technique to do what you want is pretty simple:

Replace the select with a div (to contain whichever image the user selects) and an image of the arrow you see on a select.

Use a div (we'll call it divList) to contain all the images that will be in the so called select. Default divList's display to none until the person clicks on the arrow/select field at which point it would be set to block. You'll want to have it be absolutely positioned to line up under the so called select and it's z-index to be above everything else on the page (and because that you don't have any real selects under it or you'll have to deal with that using the classic iframe shim).

Inside divList, you can either put all the images, or a separate div containing each image plus appropriate text, so that you can do a mouseover effect that changes the background, similar to the way a select does it. You could put the file name in the alt attribute of the image, if it isn't the src, and reference that into a hidden field onclick. The onclick will also have to populate the so called select with a copy of the image (use this.src) and then hide divList again.

I can elaborate more if you're willing to go through it, you can also reach me on IRC, I op on Undernet's #javascript channel.
posted by furtive at 11:32 AM on March 10, 2005

Thanks, all. For now, I'm forced into a HTML-only solution, as my users have a sad history of having ancient browsers, disabled javascript, and the like.

Surprisingly, I did stumble upon a solution. Here it is (for Google's sake):

I create an array containing filenames of all of the valid images in the directory. Then I crawl through the array, creating an optgroup for each image, and a single option element inside each optgroup. Optgroups can have background images, so I use inline CSS to give each one an appropriate background color and display the image in the background, justified right.

The effect is exactly what I was looking for. The select returns the file name, but the user can choose by image.
posted by ewagoner at 6:48 AM on March 11, 2005

This page was my inspiration.
posted by ewagoner at 7:03 AM on March 11, 2005