Sugapablo wrote:
Can anyone help me out with some code to change three table cells
(<td>) when one is hovered over?
I have a calendar grid where each day is made up of three table cells and
I want all three to change color when any of the three are hovered over.
I would prefer to do this with pure CSS if possible, but if Javascript is
the only way...so be it.
Below is a script that changes the style of cells in groups of 3.
There are likely better ways of doing it, say if you put your 3 'cells'
inside a single table cell and use DIV elements instead of TDs for the
three cells. Then you only need a single mouseover/out on the base
cell.
If there was wider support for 'hover' on elements other than A you
could use that with pure CSS. But since IE doesn't support hover on
cells, you're sunk (unless none of your visitors us IE :-) ).
e.g. have a look at the second table in a browser other than IE.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>hi/lo</title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<style type="text/css">
#calendar {
border-collapse: collapse;
}
#calendar td {
width: 3em; height: 2em;
}
..hiLite { color: black; background-color: #E6E0C1;}
..loLite { color: black; background-color: #FFCC66;}
#calendar2 {
border-collapse: collapse;
}
#calendar2 td {
width: 3em; height: 2em; color: black; background-color: #FFCC66;
}
#calendar2 td:hover {
color: black; background-color: #E6E0C1;
}
</style>
</head>
<script type="text/javascript">
function cellHiLite(cell, lite) {
var row = cell.parentNode;
var idx = Math.floor(cell.cellIndex/3)*3;
for ( var i=0; i<3; i++ ) {
row.cells[idx+i].className = ('hi' == lite )? 'hiLite' : 'loLite';
}
}
// Add mouseover/out & sets initial class to lowLite
function initTable(t) {
if ( !document.getElementById
|| !document.getElementsByTagName
|| !document.body.style ) {
return;
}
var cells = document.getElementById(t).getElementsByTagName('t d');
var c, i = cells.length;
while ( i-- ) {
c = cells[i];
c.className = 'loLite';
c.onmouseover = function() {cellHiLite(this,'hi');}
c.onmouseout = function() {cellHiLite(this,'low');}
}
}
window.onload = function() { initTable('calendar'); }
</script>
<p>This table uses scripted mouseover/out</p>
<table id="calendar">
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
<hr>
<p>This table uses CSS and hover (not supported by IE)</p>
<table id="calendar2">
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
</body></html>
--
Rob
