Help with a small layout issue? [Archive] - Lissa Explains it All: Web Design Forums

gosgonue

05-01-2010, 02:04 PM

I'm not honestly sure if this is the right section of the forums for this,but anyway...I was wondering if someone could help me with a layout problem I've been having.I'm using a code that's supposed to create a button that when clicked,will change the background color of a specific DivLayer from white to black and back again.Well I got that part to work,as you can see here:

My Test Page (http://slashgrizzly.webs.com/test.html)

What I can't seem to figure out is how to get that same button to change to color of the text when it changes the color of the background.What I want is to have the layer start out with a white background with black font,but when the button gets clicked,they can change the layer background to black with white text.Can anyone help me out?I tried to google it,but I don't honestly know what I'm searching for.

amicus

06-15-2010, 03:12 PM

try this code

<Html>
<head>
<script language="javascript" type="text/javascript">
function changeBackgroundColor(objDivID) {
var backColor = document.getElementById(objDivID).style.background Color;

if((backColor.toLowerCase()=='#ffffff') ||
(backColor.toLowerCase()=='rgb(255, 255, 255)')) {
document.getElementById(objDivID).style.background Color = '#000000';
document.getElementById(objDivID).style.color = '#ffffff';
}
else {
document.getElementById(objDivID).style.background Color = '#ffffff';
document.getElementById(objDivID).style.color = '#000000';
}
}
</script>
</head>

<BODY>
<div id=Header style="position:absolute; top:0; left:50; width:900; height:100; z-index:1; padding:0px; border: #000000 0px solid; background-color:#42556A;"></div>

<div id=Navigation style="position:absolute; top:100; left:50; width:200; height:100%; z-index:1; padding:0px; border: #000000 0px solid; background-color:#232426;"></div>

<div id=BodyBGBar style="position:absolute; top:100; left:250; width:700; height:50; z-index:1; padding:0px; border: #000000 0px solid; background-color:#000000;">
<div align="center"><input type="button" value="LIGHT/DARK" onclick="changeBackgroundColor('content')" /></div>
</div>

<div id="content" style="position:absolute; top:150; left:250; width:700; height:100%; z-index:1; padding:0px; border: #000000 0px solid; background-color:#FFFFFF;">
This page is used by the owner of this site for the purpose of testing layout designs and effects.
</div>
</Body>
</Html>