Select menu combo box to display images instead of text

[aPPmaSTer]

Hey all, I'm trying to create a simple <select> menu in which the options are not text, but images. How can I go about doing this?

I tried <option value="x"><img src="xx" /></option> with no success...

If no solution exists with HTML, is there a solution with JavaScript or any other language?

[Taywin]

It may be possible on FF using CSS but not sure about IE. Try this...

<style type="text/css">
.optionImg1 {
  background-image: url('image/path');
}
.optionImg2 {
  background-image: url('image/path');
}
</style>

// in HTML
<select>
<option class="optionImg1">Option 1</option>
<option class="optionImg2">Option 2</option>
</select>

[aPPmaSTer]

Thanks, but I unfortunately this isn't working. Perhaps there's a way that instead of making a combobox, I can make balloon that pops up and shows all the options. Any idea how to start on something like that?

[Taywin]

Sorry about that. To make a balloon, you may use 'div' with absolute position. Then it should be hidden when the page is loaded. Use your mouse listener (mouse over) to adjust the 'div' location and show it. If the mouse is out from the selected area, just simply hide the 'div'. Also, if the mouse is over on the balloon instead of the selected area, you should still keep the balloon visible.

[aPPmaSTer]

Excellent idea, thank you!