Forum Moderators: not2easy
I've been searching for the past hour or so now, looking for a way to highlight multiple rows and columns on mouseover at once. I would like to be able to get the following table segment to highlight all at once when a user scrolls over any individual cell:
<tr>
<td colspan="2">
<td rowspan="2">
<td rowspan="2">
<tr>
<tr>
<td>
<td>
<tr>
That is, all td and tr segments highlight the same color when a user scrolls over any cell. If this is possible, how can it be done?
Thanks,
Max
You may likely want to use javascript for what you're doing.
If I may ask, why would you need such functionality in the first place, though?
Yes, I would like to highlight two rows at the same time. I don't really need that kind of functionality but I would like to maintain the design of my table while adding that extra bit of attraction to it - I have seen other sites with similar tables sacrificing the design of their table to keep everything in one simple row.
I just looked up adjacent sibling selectors and they don't work properly in IE6 but the issue has been fixed in IE7 (or so I've read). Any ideas on how I could do this in java?
Saying that, I'd be very interested to see a CSS-only solution
Anyhoo... here's a (perhaps clumsy, yet 'functioning'and 'valid') CSS/JS combination:
[pre]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> Highlight multiple rows </title>
<style type="text/css">
.myHighlight {
color:#fff;
background:#666;
}
.myDefault {
color:#333;
background:#ccc;
}
</style>
<script type="text/javascript">
function changeTo(myId)
{
document.getElementById(myId).className='myHighlight';
}
function changeBack(myId)
{
document.getElementById(myId).className='myDefault';
}
</script>
</head>
<body>
<form name="myFormName" method="get" action=" ">
<h1>
HIGHLIGHT MULTIPLE ROWS
</h1>
<noscript>
Javascript must be enabled for the following section to work as intended
</noscript>
<table border="1">
<tr id="trA">
<td colspan="2" id="a1" class="myDefault" onMouseover="changeTo('a1'); changeTo('a2');" onMouseout="changeBack('a1'); changeBack('a2');">
aOne aOne aOne aOne aOne aOne
</td>
<td rowspan="2" id="a2" class="myDefault" onMouseover="changeTo('a1'); changeTo('a2');" onMouseout="changeBack('a1'); changeBack('a2');">
aTwo aTwo aTwo aTwo aTwo
</td>
<td rowspan="2" id="a3" class="myDefault" onMouseover="changeTo('a3'); changeTo('a4');" onMouseout="changeBack('a3'); changeBack('a4');">
aThree aThree aThree aThree aThree
</td>
<td rowspan="2" id="a4" class="myDefault">
aFour aFour aFour
</td>
</tr>
<tr id="trB">
<td id="b1" class="myDefault" onMouseover="changeTo('b1'); changeTo('b2');" onMouseout="changeBack('b1'); changeBack('b2');">
bOne bOne bOne bOne bOne
</td>
<td id="b2" class="myDefault" onMouseover="changeTo('b1'); changeTo('b2');" onMouseout="changeBack('b1'); changeBack('b2');">
bTwo bTwo bTwo bTwo
</td>
</tr>
<tr id="trC" class="myDefault" >
<td onMouseover="changeTo('trC');" onMouseout="changeBack('trC');">
cOne cOne cOne cOne cOne
</td>
<td>
cTwo cTwo cTwo cTwo
</td>
<td>
cThree cThree cThree cThree cThree cThree cThree
</td>
<td>
cFour cFour cFour cFour cFour
</td>
<td>
cFive cFive cFive cFive cFive
</td>
</tr>
<tr id="trE">
<td id="e1" class="myDefault" onMouseover="changeTo('b1'); changeTo('e1');" onMouseout="changeBack('b1'); changeBack('e1');">
eOne eOne eOne eOne eOne
</td>
<td id="e2" class="myDefault" onMouseover="changeTo('b2'); changeTo('e2');" onMouseout="changeBack('b2'); changeBack('e2');">
eTwo eTwo eTwo eTwo
</td>
<td id="e3" class="myDefault" onMouseover="changeTo('trC'); changeTo('e3');" onMouseout="changeBack('trC'); changeBack('e3');">
eThree eThree eThree eThree
</td>
<td id="e4" class="myDefault" onMouseover="changeTo('a3'); changeTo('a4'); changeTo('e4'); changeTo('e5');" onMouseout="changeBack('a3'); changeBack('a4'); changeBack('e4'); changeBack('e5');">
eFour eFour eFour eFour
</td>
<td id="e5" class="myDefault" onMouseover="changeTo('b1'); changeTo('b2'); changeTo('e5');" onMouseout="changeBack('b1'); changeBack('b2'); changeBack('e5');">
eFive eFive eFive eFive
</td>
</tr>
</table>
</form>
</body>
</html>
[/pre]
[edited by: Xapti at 6:53 am (utc) on Feb. 5, 2008]
I don't know why microsoft did this, I feel its almost like strapping us all into booster seats to ride a coaster - I wanna enjoy the coaster, not be tied down and padded!
Xapti, I'm not exactly sure what you mean about the premade scripts. Where do I get a hold of IE7.js?
Thanks,
Max
When it comes to IE7.js, google can be your friend. I'm quite sure searching that term gives you all the information you should need at the first result (the homepage of the script, I'd guess)
I've heard of a thing called google but I'm not really sure what it is. Everyone keep saying its a friend, but I'm a bit skeptical. I'm completely joking of course.
Take care,
Max
