Include this function in your page:
function changeDropDownValue(val, dropdown)
{
for(var i=0;i<dropdown.options.length;i++)
{
if(dropdown.options[0].value = val)
{
dropdown.selectedIndex = i;
return true;
}
}
return false;
}
Make your color palette like this:
<style type='text/css'>
td {width:10px;height:10px;font-size:10px;}
</style>
<table>
<tr>
<td style='background-color:#FF0000' onmouseover='changeDropDown(this.backgroundColor,d ocument.getElementById("sel")'> </td>
<td style='background-color:#00FF00' onmouseover='changeDropDown(this.backgroundColor,d ocument.getElementById("sel")'> </td>
<td style='background-color:#0000FF' onmouseover='changeDropDown(this.backgroundColor,d ocument.getElementById("sel")'> </td>
</tr>
</table>
And then your select box like so:
<select id='sel'>
<option value='#FF0000'>red</option>
<option value='#00FF00'>green</option>
<option value='#0000FF'>blue</option>
</select>
Add the colors you need following suit, and this should work as you described.
-Snib -
http://www.snibworks.com
Where will you be in 100 years?