Log in

View Full Version : 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 :
http://www.frogstyling.be/ColorChoiceBG.JPG

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",... .




<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 (http://www.knowledgerush.com/kr/encyclopedia/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 (http://www.w3schools.com/html/html_colornames.asp).
...and would not work anyway. :eek:

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 :
http://www.frogstyling.be/OptionValue.JPG

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.


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


<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
Yammaski
02-27-2010, 02:54 PM
It looks that it's gonna work !
I tested it, but now I have to implent it into my "big" site :)

I let you know, thanks !!!

Yam.
coothead
02-27-2010, 03:00 PM
I will keep my fingers crossed then. :D
Yammaski
03-16-2010, 06:24 PM
Hi,

It's working fine, just 1 little issues.
When the page is loaded, there's no image visible because the bgcolor is the same as the image.
I can't change that because my site is like that.
You first have to select a color before a colored bg appears.
Try my prototype : http://www.frogstyling.be/X_Tests/ColorChoiceCss.asp
Is it possible to adjust the script so that a bgcolor already is selected on page load ?