Hey guys,

I've got a little thing here for you pros.

HTML:

<html>
<head>
<title>Untitled Document</title>
</head>

<body>

<div id="container">
	<div id="bluebox">ON</div>    
        <div id="redbox">ON</div>    
    <div class="clr"></div>
</div>

</body>
</html>

 

CSS:

body {
	background-color:#eee;
	font-family:Arial, Helvetica, sans-serif;
	font-size:20px;
	}

#container {
	width:320px;
	background-color:#fff;
	margin:20px auto;
	padding:40px;
	line-height:50px;
	text-align:center;
	font-weight:bold;
	}
	
	#container:hover {
		background-color:#FC3;
		}

#bluebox {
	float:left;
	width:148px;
	height:48px;
	background-color:#0080FF;
	margin-right:20px;
	border: solid 1px #fff;
	}

#redbox {
	float:left;
	width:148px;
	height:48px;
	background-color:#FF2626;
	border: solid 1px #fff;
	}
	
	.clr {clear:both;}

 

So, basically I want to play around with background colors here. I want to know how I can control the background color of one div by click other divs. I've designed a clear platform here to test on. The container has a plain white bg with a orangy hover bg.

When I click "ON" on the blue box, i want the background of #container to change to blue and display "OFF" in the place of ON.

When hovering of container while blue/red in ON, there should be no hover effect.

When I click "OFF" on the blue box I want the background color of #container to revert back to its original color and display ON again.

and the same with red box...click "on" and bg goes red, click "off" and you revert to normal container bg color.

If you need further explanation then please ask lol.

Any help will be greatly appreciated.

Thanks.

If you want to change style propperties of one element by interacting with another you will have to use javascript.

The easiest way is to add an onclick attribute to your #bluebox and #redbox like this

<div id="bluebox" onclick="blueFunction();">ON</div>

We have now created an event that fires a js funtion called blueFunction when the blue box is clicked, we will now have to create the function itself:

Add opening and closing script tags just before your closing body tag and create the function within the script tags

<script>
function blueFunction ()
{
document.getElementById("container").style.backgroundColor="#0000ff";
}
</script>

Create an onclick event on your red box as well and add a similar function for that event within your script tags (I suggest you call it redFunction)

 

EDIT: Note this is the easy beginner solution. You can also choose to add the onclicks to the elements from your script and pass the backgroundcolor to a single function instead of two diferent functions. But I'm guessing you want to keep it simple

Edited September 25, 201313 yr by Nillervision

if you also want to change the text of you onclick divs (on and off) you will have to use the innerHtml propperty in your function somthing like this

<script>
function blueFunction ()
{
document.getElementById("container").style.backgroundColor="#0000ff";
document.getElementById("bluebox").innerHtml="your text for the blue box";
document.getElementById("redbox").innerHtml="your text for the red box";
}
</script>

Edited September 25, 201313 yr by Nillervision

I would suggest to yous jquery library instead of pure javascript.

 

and then you can do something like that

 

 

$(document).ready(function(){

$('#first_button_id').click(function(){

$('#div_id').css('background','#0000ff');

});

});

I would suggest to yous jquery library instead of pure javascript.

That depends. If you are using jquery for other tasks anyway then ok, but to include a resource intensive js framework like jquery just to change a couple of propperties would be overkill in my opinion.

Thanks guys for your tips. I'm going to play around with this... lol