Hi all,
I want to be able to make the cells in a table change color when the cursor hovers over them. I don't want to have the cells link to anything, I just want the cells to change there bgcolor.
therefore defining a A:whatever:hover class doesn't apply here, what other options do I have?Originally posted by T-Wag
therefore defining a A:whatever:hover class doesn't apply here, what other options do I have? How about whatever:hover without the anchor? Of course it probably won't work in IE.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>highLight</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
<!--
onload=function () {
var aTR=document.getElementsByTagName('tr');
for (var i=0;i<aTR.length;i++) {
if (aTR.addEventListener) { // Mozilla
aTR.addEventListener('mouseover', function() { highLight(this); }, false);
aTR.addEventListener('mouseout', function() { highLight(this); }, false);
}
else {
aTR.onmouseover=function() {highLight(this);}
aTR.onmouseout=function() {highLight(this);}
}
}
}
function highLight(obj) {
obj.className=(obj.className=="on")? "off" : "on";
}
//-->
</script>
<style type="text/css">
<!--
tr {background:#eee;}
.off {background:#eee;}
.on {background:#9cf;}
-->
</style>
</head>
<body>
<table border="1" cellpadding="3" cellspacing="0" summary="demo event highlighter">
<tr><td>1.1</td><td>1.2</td></tr>
<tr><td>2.1</td><td>2.2</td></tr>
<tr><td>3.1</td><td>3.2</td></tr>
</table>
</body>
</html>This is what I was thinking:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>highLight</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
tr {background:#eee;}
tr:hover {background:#9cf;}
-->
</style>
</head>
<body>
<table border="1" cellpadding="3" cellspacing="0" summary="demo event highlighter">
<tr><td>1.1</td><td>1.2</td></tr>
<tr><td>2.1</td><td>2.2</td></tr>
<tr><td>3.1</td><td>3.2</td></tr>
</table>
</body>
</html>Seems to work the same...not tested in IE (because I know it won't work. Fang's will work in IE though).
Triumph, it will still need JavaScript to work in IE 
Originally posted by Fang
Triumph, it will still need JavaScript to work in IE Yep! 
Wow, thanks Fang & Triumph, this is exactly what I needed. Interesting that IE requires the Javascript to work, why is that exactly?1 more question:
It appears that with this example, every <tr> tag in the page will highlight with the rollover, is there a way to isolate certain <tr>'s that should highlight and those that should not?Originally posted by T-Wag
Interesting that IE requires the Javascript to work, why is that exactly?
Because ie only supports the :hover pseudo attribute on links not on other html elements.
Originally posted by T-Wag
1 more question:
It appears that with this example, every <tr> tag in the page will highlight with the rollover, is there a way to isolate certain <tr>'s that should highlight and those that should not?
Yes, there are several ways depending on the structure of your page, but for example using
tr.classname
tr.classname:hover
and then give the class to the relevant <tr>sexcellent, thanks. However I'm not clear on the syntax.
So far my knowledge of css classes encompasses code such as:
<tr class="class_1"></td>
I see in your example you have:
<td.class1></td>
Do these two examples achieve the same results and will they yeild the same response with the rollover effect?Sorry, should have been less short-hand, those were to go in the style sheet:
<style type="text/css">
<!--
tr.class_1 {background:#eee;}
tr.class_1:hover {background:#9cf;}
-->
</style>
to match the html you showed
<tr class="class_1"><td>......
the style reads as
"for 'tr' tags with a class of 'class_1'"
and
"for 'tr' tags with a class of 'class_1' that are being hovered over"
in pseudo-css(tm).
so other tr tags declared without class="class_1" will not get the hover effect applied, e.g.
<tr><td>......
<tr id="xx"><td>......
<tr class="class_2"><td>......
There are numerous ways to 'qualify' what elements within a page your css rule should apply to but not all of them work cross browser so sometimes you have to experiment a little.
HTH,
DaiI see, that clarifies it very well.
thanks very much for your help all!How 'bout this. Use a link, but add onClick="return false;" to the <a> tag. The href can be whatever you want, but it shouldn't ever get clicked. It should work in IE.I hate to be a bother fang, but I'm very new to javascript and I don't quite fully understand how the code works. Would you be able to clarify how each bit of the code fulfills it's purpose? I know it's a lot to ask but I'd really appreciate itT-wag -
This doesn't require heavy coding and can be applied easily:
<td bgcolor='#999966' onmouseover="this.bgColor='#c6c6aa'" onmouseout="this.bgColor='#999966'"> THE CODE FOR THE CONTENT OF THE TABLE CELL GOES HERE.</td>okay I'll try that,
is this.bgColor a class defined in the style sheet?Nope, just whatever is in the tag itself.interesting, I didn't know html had a this. property (whatever) like in actionscript and other languages.
ThanksIt is not html, it is javascript.
"this" is a keyword for the current object and what it refers to depends on the context. Because in this case the keyword is used in a function which is part of the td tag this refers to that specific td object in the DOM (Document Object Model - javascript's way of refering to parts of the page).
So if you moved that code into any other tag in the page "this" would refer to the tag you moved it to instead. Therefore it is a good way to write portable code, rather than refering to an object by name or id.
HTH,
Dai
I want to be able to make the cells in a table change color when the cursor hovers over them. I don't want to have the cells link to anything, I just want the cells to change there bgcolor.
therefore defining a A:whatever:hover class doesn't apply here, what other options do I have?Originally posted by T-Wag
therefore defining a A:whatever:hover class doesn't apply here, what other options do I have? How about whatever:hover without the anchor? Of course it probably won't work in IE.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>highLight</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
<!--
onload=function () {
var aTR=document.getElementsByTagName('tr');
for (var i=0;i<aTR.length;i++) {
if (aTR.addEventListener) { // Mozilla
aTR.addEventListener('mouseover', function() { highLight(this); }, false);
aTR.addEventListener('mouseout', function() { highLight(this); }, false);
}
else {
aTR.onmouseover=function() {highLight(this);}
aTR.onmouseout=function() {highLight(this);}
}
}
}
function highLight(obj) {
obj.className=(obj.className=="on")? "off" : "on";
}
//-->
</script>
<style type="text/css">
<!--
tr {background:#eee;}
.off {background:#eee;}
.on {background:#9cf;}
-->
</style>
</head>
<body>
<table border="1" cellpadding="3" cellspacing="0" summary="demo event highlighter">
<tr><td>1.1</td><td>1.2</td></tr>
<tr><td>2.1</td><td>2.2</td></tr>
<tr><td>3.1</td><td>3.2</td></tr>
</table>
</body>
</html>This is what I was thinking:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>highLight</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
tr {background:#eee;}
tr:hover {background:#9cf;}
-->
</style>
</head>
<body>
<table border="1" cellpadding="3" cellspacing="0" summary="demo event highlighter">
<tr><td>1.1</td><td>1.2</td></tr>
<tr><td>2.1</td><td>2.2</td></tr>
<tr><td>3.1</td><td>3.2</td></tr>
</table>
</body>
</html>Seems to work the same...not tested in IE (because I know it won't work. Fang's will work in IE though).
Triumph, it will still need JavaScript to work in IE Originally posted by Fang Triumph, it will still need JavaScript to work in IE
Yep! Wow, thanks Fang & Triumph, this is exactly what I needed. Interesting that IE requires the Javascript to work, why is that exactly?1 more question:It appears that with this example, every <tr> tag in the page will highlight with the rollover, is there a way to isolate certain <tr>'s that should highlight and those that should not?Originally posted by T-Wag
Interesting that IE requires the Javascript to work, why is that exactly?
Because ie only supports the :hover pseudo attribute on links not on other html elements.
Originally posted by T-Wag
1 more question:
It appears that with this example, every <tr> tag in the page will highlight with the rollover, is there a way to isolate certain <tr>'s that should highlight and those that should not?
Yes, there are several ways depending on the structure of your page, but for example using
tr.classname
tr.classname:hover
and then give the class to the relevant <tr>sexcellent, thanks. However I'm not clear on the syntax.
So far my knowledge of css classes encompasses code such as:
<tr class="class_1"></td>
I see in your example you have:
<td.class1></td>
Do these two examples achieve the same results and will they yeild the same response with the rollover effect?Sorry, should have been less short-hand, those were to go in the style sheet:
<style type="text/css">
<!--
tr.class_1 {background:#eee;}
tr.class_1:hover {background:#9cf;}
-->
</style>
to match the html you showed
<tr class="class_1"><td>......
the style reads as
"for 'tr' tags with a class of 'class_1'"
and
"for 'tr' tags with a class of 'class_1' that are being hovered over"
in pseudo-css(tm).
so other tr tags declared without class="class_1" will not get the hover effect applied, e.g.
<tr><td>......
<tr id="xx"><td>......
<tr class="class_2"><td>......
There are numerous ways to 'qualify' what elements within a page your css rule should apply to but not all of them work cross browser so sometimes you have to experiment a little.
HTH,
DaiI see, that clarifies it very well.
thanks very much for your help all!
How 'bout this. Use a link, but add onClick="return false;" to the <a> tag. The href can be whatever you want, but it shouldn't ever get clicked. It should work in IE.I hate to be a bother fang, but I'm very new to javascript and I don't quite fully understand how the code works. Would you be able to clarify how each bit of the code fulfills it's purpose? I know it's a lot to ask but I'd really appreciate itT-wag -This doesn't require heavy coding and can be applied easily:
<td bgcolor='#999966' onmouseover="this.bgColor='#c6c6aa'" onmouseout="this.bgColor='#999966'"> THE CODE FOR THE CONTENT OF THE TABLE CELL GOES HERE.</td>okay I'll try that,
is this.bgColor a class defined in the style sheet?Nope, just whatever is in the tag itself.interesting, I didn't know html had a this. property (whatever) like in actionscript and other languages.
Thanks
It is not html, it is javascript. "this" is a keyword for the current object and what it refers to depends on the context. Because in this case the keyword is used in a function which is part of the td tag this refers to that specific td object in the DOM (Document Object Model - javascript's way of refering to parts of the page).
So if you moved that code into any other tag in the page "this" would refer to the tag you moved it to instead. Therefore it is a good way to write portable code, rather than refering to an object by name or id.
HTH,
Dai