Changing (div) backgroundcolor with CSS ?

**Yammaski** · 02-25-2010, 06:14 PM

On the detailpage of my webshop the customer can choose a color from a dropdownmenu. Now alle articles/products are shown in black. I want to change the backgroundcolor for the images when customer click on a color.
See screenshot :

Images are "transparant inverted gif's" in the same color as the page, so when changing the BG-color (div or table) it's just like the imagecolor is changing.
Is this possible with CSS. I saw sites where you can click a button to change colors, so I think that my issue is to do !?

Yam.

**simcomedia** · 02-25-2010, 08:48 PM

CSS doesn't provide any method of creating hyperlink functionality which is what you need. You'll have to use some javascript in order to achieve your goal.

You could, though, choose to use the :hover selector to create something similar but it wouldn't have a drop down selector. It would be more of a gallery style

**Yammaski** · 02-27-2010, 09:16 AM

Hi,
Here my code so far.
I've got it nearly work, but I'am surching for a solution to get the option value in "text"(colorname).
With the hexadecimal codes it's working fine !
With the text, all "reds" stay red in stead of "light red", "dark red",... .

Code:

<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">
                                &nbsp;<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>

**coothead** · 02-27-2010, 11:13 AM

Hi there Yammaski,

and a warm welcome to these forums.

You need to use camelCase for the option values.

So "Dark Red" must be written as "DarkRed".

Note that many of your option colors...

Light Red, Bordeaux, Light Violet, Telemagenta, Striking Blue, Traffic Blue, Grass Green, Anthracite, Telegrey.

...are not on this list...

HTML Color Names

.
...and would not work anyway.

Also remember to use the US spelling of "gray" instead of the English "grey".

coothead

**Yammaski** · 02-27-2010, 11:41 AM

Thanks for your info, Coothead !
So I have to use the hexacodes for the option value.
I'll try to transform the codes to my "colornames" with an ASP-If Statement.
The colorname appears on the order, that's why it has to be the correct name.
See attach :

Gray/grey ... I just used the colornames of the manufacturer's colorbook.

Yam.

**coothead** · 02-27-2010, 11:57 AM

Hi there Yammaski,

you can put whatever you like for the option text.

It is the option value that you need to do correctly, I would, of course, suggest that you use hex values.

Code:


<option value="hex value goes here">Golden Yellow goes here</option>

coothead

**Yammaski** · 02-27-2010, 12:41 PM

Yes, I know.
But it's the "option value" that will be shown on the orderform, like you see on previous image.
If the "option value" is #FFD600, than "Golden Yellow" becomes "#FFD600" on the order.
That's why I think that I have to use ASP from hereon !?

**coothead** · 02-27-2010, 01:10 PM

Hi there Yammaski,

in that case use the switch function in your script...

Code:


<script type="text/javascript"> 
 
function changeBG(color) {

switch(color) {
   case 'Light Red':
   color='#xxxxxx';
   break;

   case 'Bordeaux':
   color='#xxxxxx';
   break;

   case 'Light Violet':
   color='#xxxxxx';
   break;

   case 'Telemagenta':
   color='#xxxxxx';
   break;

   case 'Striking Blue':
   color='#xxxxxx';
   break;

   case 'Traffic Blue':
   color='#xxxxxx';
   break;

   case 'Telemagenta':
   color='#xxxxxx';
   break;

   case 'Grass Green':
   color='#xxxxxx';
   break;

   case 'Anthracite':
   color='#xxxxxx';
   break;

   case 'Telegrey':
   color='#xxxxxx';
   break;
 }
    element=document.getElementById('BG_Color_prShots').style;
    element.background=color;
 }
</script>

Note:-
Do not use language="javascript", it is deprecated.

coothead