Images in HTML select form elements?
March 10, 2005 9:52 AM Subscribe
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.
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.
I found this, which appears to be an IE-only solution.
posted by patgas at 10:42 AM on March 10, 2005
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
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
Response by poster: 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
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 thread is closed to new comments.
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