Yes, we know, and the color the user chooses will in in the form, however it will be selected from a non <select> menu, and filled in by simple javascript function.
Code:
<input type="hidden" id="color">
<ul id="suckerfish">
<li>Currently selected color: <span id="preview">none</span>
<ul id="menu">
<li><img src="magenta.gif" onclick="setColorValue('magenta');"></li>
<li><img src="orange.gif" onclick="setColorValue('orange');"></li>
</ul></li>
</ul>
<script type="text/javascript">
function setColorValue(value) {
var colorValueField = document.getElementById('color');
var previewObject = document.getElementById('preview');
if (colorValueField) colorValueField.value = value;
if (previewObject) previewObject.innerHTML = "<img src=\"" + value +".gif\"> "+ value;
hideMenu()
}
function hideMenu() {
var menuObj = document.getElementById('menu');
if (menuObj && menuObj.style) menuObj.style.display = "none";
}
</script>
This is a crummy, but working script (I hope someone will come with an optimized version), you'll need to integrate it into your page.
A few assumptions are made:
1) images are gifs, and their names represent color "value".
2) you might want to integrate suckerfish (or other CSS based) menu (of course, this will work even without the suckerfish menu, when you just attach onclick event to images, yet IMHO it will look better, and you wanted a "dropdown")...
Bookmarks