Forum Moderators: open
I have multiple divs, all with the same "class" name. What I would like, is when I rollover one of the divs then ALL the divs with the same class name will change their background colour.
I am sure this would do something with getElementById() but I have been able to make absolutely no progress on this whatsoever. Any help would be greatly appreciated!
and a warm welcome to these forums.;)
Try this, it may suit your purposes...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>swap background color</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
.foo,.blah {
background-color:#fff;
color:#000;
width:162px;
line-height:100px;
border:1px solid #000;
text-align:center;
margin:5px auto;
}
-->
</style>
<script type="text/javascript">
<!--
function swapBgColor() {
dv=document.getElementsByTagName('div');
for(c=0;c<dv.length;c++) {
if(dv[c].className=='foo') {
dv[c].onmouseover=function() {
for(c=0;c<dv.length;c++) {
if(dv[c].className=='foo') {
dv[c].style.backgroundColor='#000';
dv[c].style.color='#fff';
}
}
}
}
}
}
onload=swapBgColor;
//-->
</script>
</head>
<body>
<div class="foo">class="foo"</div>
<div class="blah">class="blah"</div>
<div class="foo">class="foo"</div>
<div class="blah">class="blah"</div>
<div class="foo">class="foo"</div>
<div class="blah">class="blah"</div>
<div class="foo">class="foo"</div>
</body>
</html>
birdbrain
I forgot to add an onmouseout option to the script.
Here it is, if you are interested, highlighted in blue...
<script type="text/javascript">
<!--
function swapBgColor() {
dv=document.getElementsByTagName('div');
for(c=0;c<dv.length;c++) {
if(dv[c].className=='foo') {
dv[c].onmouseover=function() {
for(c=0;c<dv.length;c++) {
if(dv[c].className=='foo') {
dv[c].style.backgroundColor='#000';
dv[c].style.color='#fff';
}
}
}[blue][3]
dv[c].onmouseout=function() {
for(c=0;c<dv.length;c++) {
if(dv[c].className=='foo') {
dv[c].style.backgroundColor='';
dv[c].style.color='';
}
}
}[/3][/blue][3]
}
}
}
onload=swapBgColor;
//-->[/3]
birdbrain
