...

View Full Version : mouseover table cell colors - multiple cells



Errica
06-29-2006, 09:38 PM
Using the following, I can see how to change a cell color on a mouseover:

background-color:white"
onMouseover="this.style.backgroundColor='gray';"
onMouseout="this.style.backgroundColor='white';">

Is it possible, however, to have two td's change their background color (to the same color) by placing your cursor over an image that is in yet another td?

For example,

Mousing over this:
<td><img src="image.gif"></td>

Will change the background colors of both of these:
<td>content</td>
<td>content</td>

coothead
06-29-2006, 10:42 PM
Hi there Errica,

have a look at this example, it may give you some ideas...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<base href="http://achelous.mysite.wanadoo-members.co.uk/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
#table1 {
border:1px solid #999;
margin:auto;
}
#table1 td{
width:300px;
height:300px;
border:1px solid #999;
text-align:center;
}
#ball {
background-image:url(ball_shad.jpg);
background-color:inherit;
color:#fff;
}
.white {
background-color:#fff;
color:#000;
}
.blue {
background-color:#00f;
color:#fff;
}
-->
</style>

<script type="text/javascript">
<!--
window.onload=function() {
cell=document.getElementsByTagName('td');
document.getElementById('ball').onmouseover=function() {
for(c=0;c<cell.length;c++) {
if(cell[c].className=='white') {
cell[c].className='blue';
}
}
}
document.getElementById('ball').onmouseout=function() {
for(c=0;c<cell.length;c++) {
if(cell[c].className=='blue') {
cell[c].className='white';
}
}
}
}
//-->
</script>

</head>
<body>

<table id="table1"><tr>
<td id="ball">mouseover</td>
<td>cell</td>
<td class="white">cell</td>
</tr><tr>
<td >cell</td>
<td class="white">cell</td>
<td>cell</td>
</tr></table>

</body>
</html>
...do bear in mind that tables are not for layout but tabular data. This sort of script will work just as well with divs.

coothead

Errica
06-30-2006, 02:54 AM
THAT........is ideal, thanks!!

chineseren
06-30-2006, 04:22 AM
Thanks!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum