472,958 Members | 2,137 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,958 software developers and data experts.

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

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
2 11190

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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Harlan Messinger | last post by:
I've had this in the back of my head for a while. Take a look at Example 1 on http://gavelcade.com/table.html There are three levels of column headings. All table accessibility discussions...
3
by: N. Demos | last post by:
I have a single row table with fixed dimensioned cells nested inside a fixed dimensioned div, which has overflow: hidden. The div's dimensions are such that It should only display the first two...
1
by: Jon W | last post by:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html> <head> <title>rolly</title> <!-- The desired performance for this gem would be to: 1. click on table cells 2. edit in INPUT 3....
2
by: Mike | last post by:
My page populates a table with a list of names and other information from a JavaScript object. I receive changes (adds, change & delete) to that list, convert it into a JavaScript object. I do...
2
by: Sugapablo | last post by:
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...
0
by: Jon W | last post by:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"> <html> <head> <title>rolly</title> <!-- The desired performance for this gem would be to: 1. click on table cells 2. edit in INPUT 3....
13
by: Gary | last post by:
I have a table with a form consisting of several checkboxes and I'm wondering if its possible to change the table row background color on mouseover or hover and make it stay that color when the...
1
by: Thanks | last post by:
I have a routine that is called on Page_Init. It retrieves folder records from a database which I display as Link Buttons in a table cell. I set the table cell's bgcolor to a default color (say...
1
by: bgernon | last post by:
I have a table that consists of two rows with three cells each row. The cells contain textboxes. I am able to successfully add a new row with textboxes when a button is clicked. The problem is...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
tracyyun
by: tracyyun | last post by:
Hello everyone, I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
2
by: giovanniandrean | last post by:
The energy model is structured as follows and uses excel sheets to give input data: 1-Utility.py contains all the functions needed to calculate the variables and other minor things (mentions...
3
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...
1
by: Teri B | last post by:
Hi, I have created a sub-form Roles. In my course form the user selects the roles assigned to the course. 0ne-to-many. One course many roles. Then I created a report based on the Course form and...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM) Please note that the UK and Europe revert to winter time on...
3
by: nia12 | last post by:
Hi there, I am very new to Access so apologies if any of this is obvious/not clear. I am creating a data collection tool for health care employees to complete. It consists of a number of...
0
NeoPa
by: NeoPa | last post by:
Introduction For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...
0
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.