PDA

View Full Version : changing background-color of divs

mentalhorse
01-02-2006, 11:48 PM
Hello. I'm having problems with changing the background color of a div when it is hovered over. So here is my code:

function changeColor(the_div_name)
{
var the_div, div_string;
if (document.all)
{
div_string = "window.document.all." + the_div_name + ".style";
the_div = eval(div_string);
} else if (document.layers) {
div_string = "window.document." + the_div_name;
the_div = eval(div_string);
} else {
alert("sorry, this only works in 4.0 browsers");
return;
}
the_div.background-color = "white";
}

here is my code for the html:

<div name="div7" style="background-color:black; color:blue; position:absolute; top:95; left:664">
<a href="#" onMouseOver="changeColor(div7);>TEST7<a>
</div>

Frankly I don't know why this is not working. Help Please.
gph
01-03-2006, 12:00 AM
function changeColor(div){
div.style.backgroundColor = "white";
}

<div style="background-color:black; color:blue; position:absolute; top:95; left:664">
<a href="#" onmouseover="changeColor(this.parentNode)">TEST7<a>
</div>
mentalhorse
01-03-2006, 12:16 AM
Thank You. I was doing something else with some cross browser thing someone showed me.
gph
01-03-2006, 12:25 AM
that's code is cross ancient browser :)

Don't listen to them. What I posted is xbrowser
PhotoJoe47
01-03-2006, 12:31 AM
Here is some code that will work cross browsers. It will change the background color while the mouse is over the <a> tag and back the orginal color when the mouse is off the <a> tag.


<html>
<head>
<title>Some text for div 01</title>
<style type="text/css">
div
{
font-family: Comic Sans MS;
font-size: x-small;
font-weight: bold;
background: silver;
color: blue;
}

.bg1{background: lime}
.bg2{background: silver}

</style>
<script type="text/javascript">
function changebg(divid,bg)
{
var cbg1 = "";

cbg1 = document.getElementById(divid);
cbg1.className = bg;
}


</script>

</head>
<body>
<div id="div01">
<a href="#" onMouseOver="changebg('div01','bg1')" onMouseOut="changebg('div01','bg2')">TEST7</a>
</div>
</body>
</html>
Pyth007
01-03-2006, 02:14 PM
Just remember that if a CSS property contains hyphenated words, in js it gets changes to camel case:
CSS JS
background-color backgroundColor
text-indent textIndent
border-color borderColor
mentalhorse
01-03-2006, 02:59 PM
Ok thanks alot. Yeah. 4.0 is along way back.. haha.
Bill Posters
01-03-2006, 04:12 PM
<div style="background-color:black; color:blue; position:absolute; top:95; left:664">…


You must remember to add units to those lengths, otherwise better behaved browsers may be inclined to ignore the property declaration completely.

i.e.top:95px; left:664px;
(I'm presuming you intended for px to be used.)

The only time you can omit the units is if the value is 0.
gph
01-03-2006, 10:18 PM
Yes you're right Bill, I copied mentalhorse code without looking at it. Thanks for noticing.
_Aerospace_Eng_
01-04-2006, 05:18 AM
The only time you can omit the units is if the value is 0.
Not quite. You must include units on line-height even if the value is 0. This
#something {
line-height:0;
}
will give a validation error.
This
#something {
line-height:0px;
}
however will not. The validator will spit out the valid CSS leaving the units off which is a bit strange since it asks for units in the first place.
Bill Posters
01-04-2006, 08:07 AM
Now you mention it, this issues does ring a bell.

However, given that the CSS spec explicitly states that "After the '0' length, the unit identifier is optional", the anomalous behaviour of the W3 CSS validator seems more of a quirk, than a correct assessment of validity.
So, it's technically still valid, it's just that the W3C's own validator incorrectly marks it as invalid.
(Which is to say that I know of no special consideration for 0 length units and the line-height property in the spec.)

Of course, for those touting an 'officially' clean bill of health for their CSS, satisfying this particular validator idiosyncracy is a simple matter.