0

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?

2
Contributors
4
Replies
6
Views
6 Years
Discussion Span
Last Post by aPPmaSTer
0

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>
0

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?

0

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.

Edited by Taywin: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.