Yammaski Posted February 27, 2010 Share Posted February 27, 2010 Hi,I want the backgroundcolor of a div to change into the color the customer choose in the dropdownmenu.Here my code so far.I've got it nearly work, but I'am surching for a solution to get the option value as "color-name" instead of the "hexadecimal code".I found a list with all the color-names/hex-codes, but isn't it possible to give the "option value" a name I choose ?See attach : <html><head><title>ColorChange</title><script language="javascript" type="text/javascript"> function changeBG(color){var element = document.getElementById('BG_Color_prShots').style;{element.background = color;} }</script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head><body><table width="440" border="0" align="center" cellpadding="0"> <tr align="center"> <td><div style= width:"1px" id="BG_Color_prShots"><img src="baby 15.png"></div></td> </tr> <tr align="center"> <td><form> <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="50%" align="center"> <select name="FrogStyling_1_Color_Add" onChange="changeBG(this.value)"> <option value="Black" style="background-color:#000000; color:#FFFFFF ">Black</option> <option value="White" selected="selected" style="background-color:#FFFFFF; color:#000000 ">White</option> <option value="#FFB400" style="background-color:#FFB400; color:#000000 ">Golden Yellow</option> <option value="#FFD200" style="background-color:#FFD200; color:#000000 ">Sun Yellow</option> <option value="#FFE600" style="background-color:#FFE600; color:#000000 ">Light Yellow</option> <option value="Dark Red" style="background-color:#D70000; color:#FFFFFF ">Dark Red</option> <option value="Light Red" style="background-color:#FA0000; color:#FFFFFF ">Light Red</option> <option value="Orange" style="background-color:#FF8200; color:#FFFFFF ">Orange</option> <option value="Bordeaux" style="background-color:#960028; color:#FFFFFF ">Bordeaux</option> <option value="Light Violet" style="background-color:#9900BE; color:#FFFFFF ">Light Violet</option> <option value="Telemagenta" style="background-color:#FF69A3; color:#FFFFFF ">Telemagenta</option> <option value="Steel Blue" style="background-color:#003F79; color:#FFFFFF ">Steel Blue</option> <option value="Striking Blue" style="background-color:#2A00D5; color:#FFFFFF ">Striking Blue</option> <option value="Traffic Blue" style="background-color:#0076FF; color:#FFFFFF ">Traffic Blue</option> <option value="Turquoise" style="background-color:#00CDAD; color:#FFFFFF ">Turquoise</option> <option value="Dark Green" style="background-color:#005E00; color:#FFFFFF ">Dark Green</option> <option value="Grass Green" style="background-color:#00A048; color:#FFFFFF ">Grass Green</option> <option value="Yellow Green" style="background-color:#6ED72F; color:#FFFFFF ">Yellow Green</option> <option value="Brown" style="background-color:#7C3500; color:#FFFFFF ">Brown</option> <option value="Anthracite" style="background-color:#444243; color:#FFFFFF ">Anthracite</option> <option value="Dark Grey" style="background-color:#505050; color:#FFFFFF ">Dark Grey</option> <option value="Telegrey" style="background-color:#BEBEBE; color:#000000 ">Telegrey</option> <option value="Light Grey" style="background-color:#E6E6E6; color:#000000 ">Light Grey</option> <option value="Silver Grey" style="background-color:#C0C0C0; color:#FFFFFF ">Silver Grey</option> <option value="Gold" style="background-color:#927530; color:#FFFFFF ">Gold</option> </select> </td> </tr> </table><br /> <br /> </form></td> </tr></table> </body></html> Link to comment Share on other sites More sharing options...
jeffman Posted February 27, 2010 Share Posted February 27, 2010 1. Be aware that by rule, browers are required to recognize on 16 color names: aqua, gray, navy, silver, black, green, olive, teal, blue, lime, purple, white, fuchsia, maroon, red, and yellow. Other names might work in some browsers, but I do not think all current browsers support all X11 color names.2. An array that matches names to hex values would work. But I cannot think of a good reason NOT to use hex values in the value attribute of your options. I have also designed color pickers, and that is the way I do it. Link to comment Share on other sites More sharing options...
Yammaski Posted February 27, 2010 Author Share Posted February 27, 2010 But I cannot think of a good reason NOT to use hex values in the value attribute of your options. I have also designed color pickers, and that is the way I do it.The "option value" is triggered to show the colorname on an orderform after the color has been chosen."#FFB600" means nothing to the customer Link to comment Share on other sites More sharing options...
jeffman Posted February 27, 2010 Share Posted February 27, 2010 option.text contains the text content of your option. Since that is what the user sees when selecting the option, that's probably all you need for your order form.On the other hand, maybe I'm not sure what the original question was. Of course you can assign any value you want to a value property. If that is all you need for your project, then there should not be a problem.But if you need both values, then you can use one in the text and a different one in the value property. This would allow you, for example, to display a color swatch based on the value property, while using the text description on your order form. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.