By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
444,225 Members | 2,223 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 444,225 IT Pros & Developers. It's quick & easy.

How to hover over one table cell and have three cells change color?

P: n/a
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.

--
[ Sugapablo ]
[ http://www.sugapablo.net <--personal | http://www.sugapablo.com <--music ]
[ http://www.2ra.org <--political | http://www.subuse.net <--discuss ]

Jul 21 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a

Roughly I'd say, give an onmouseover to the parent TR, but, you probably
have a TR with many days in it, not just 1(3 td). I could be mistaken as
I don't know your scenario, but keeping 1 cell alone will do, and barely I
see the need for 3 just for 1day data, so, it seems to me you just need to
make it 1 container, instead of 3 siblings out of many, then again, we
don't konw what you have, maybe posting at www.pastebin.com your code will
give us better outlook to suggest better.
Danny

On Thu, 30 Jun 2005 09:48:04 -0700, Sugapablo <ru**@REMOVEsugapablo.com>
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.


--
Using Opera's revolutionary e-mail client: http://www.opera.com/mail/
Jul 21 '05 #2

P: n/a
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
Jul 21 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.