<tr> linked

[Cybertooth Tiger]

Ok, heres the question,

Can a <tr> be hyperlinked. I tried...

<a href="etc.html"><tr>
<td>stuff</td>
<td>STUFF</td>
</tr></a>

That did not work.

what I want to do is set a bg highlight colour so that when the user scrolls over any part of the <tr>, the whole row is highlighted.

Can this be done?

Tonz

[jkd]

No, you cannot wrap a <tr> in an <a>.

However, a background rollover is as simple as:

tr:hover {
background: newcolor;
}

:). Gecko-only of course though.

For IE, you'll need to give it onmouseover="this.style.backgroundColor='newcolor'" onmouseout="this.style.backgroundColor='oldcolor'"

[Cybertooth Tiger]

Thanks JKD.

I have the bg color set in the stylesheet.

I just wanted the whole <tr> highlighted.


OH well.... back to the drawing board.

Tonz

BTW any one watching the Americas Cup Yacht racing?

[Bosko]

Originally posted by jkd
Gecko-only of course though.

It should work in KHTML too.

[brothercake]

Originally posted by Bosko
It should work in KHTML too.

When I tried it was fine in Safari but not in Konqueror

You can make the entire <a> tag *look* like a table row, and get it clickable and css-hoverable that way.

Or, you could attach a dhtml behaviour to the table row, if you don't want script 'polluting' your html, something like:

tr.hover {
behavior:url(hover.htc);
}

then in hover.htc:

<public:component>

<attach event="onmouseover" handler="highlight" />
<attach event="onmouseout" handler="lolight" />

<script type="text/javascript">

function highlight() {
element.style.backgroundColor="yellow";
}

function lolight() {
element.style.backgroundColor="white";
}

</script>

</public:component>

[Bosko]

Originally posted by brothercake
When I tried it was fine in Safari but not in Konqueror

Safari and Konqueror are based on the same engine :rolleyes: You tried an old version of Konqueror and your conclusion is that it doesn't work with Konqueror but it does with Safari,eventhough they both use the same engine...
It works fine with Konqueror 3 here.

[brothercake]

I have kde 3.0.3 and I couldn't make it work, while safari was fine; I assumed it was a version discrepancy - that only the very *latest* KHTML builds could do it ... but it might have been something else I did wrong ... check it out - http://www.brothercake.com/scripts/navmeister/page.php

[Cybertooth Tiger]

Originally posted by brothercake
When I tried it was fine in Safari but not in Konqueror

You can make the entire <a> tag *look* like a table row, and get it clickable and css-hoverable that way.

Or, you could attach a dhtml behaviour to the table row, if you don't want script 'polluting' your html, something like:

tr.hover {
behavior:url(hover.htc);
}

then in hover.htc:

<public:component>

<attach event="onmouseover" handler="highlight" />
<attach event="onmouseout" handler="lolight" />

<script type="text/javascript">

function highlight() {
element.style.backgroundColor="yellow";
}

function lolight() {
element.style.backgroundColor="white";
}

</script>

</public:component>



Does the first code go in the CSS?

Where does the javascript go please???

Tonz

[brothercake]

That whole code fragment - from <public:component> to </public:component> goes in a seperate document called "hover.htc", and you link to it from your stylesheet, eg -

tr.hover { behavior:url(hover.htc); }

attaches that behavior file to any <tr class="hover">

[Quiet Storm]

If you're trying to have the whole TR (TD) as a link, do something like this:


<TR><TD>
<A HREF="this.html" STYLE="width:100%;">This link</a>
</TD></TR>

[Cybertooth Tiger]

many thanks to you both - I will try it and let you know how I got on.

Tonz

[brothercake]

Originally posted by Bosko
It works fine with Konqueror 3 here.

I've done some more testing on this, and there definitely is a discrepancy between Konqueror 3 and Safari. Both support :hover on arbitrary elements, but it appears Konqueror cannot change a display property from this event.

You can see in Eric Meyer's original demo (http://www.meyerweb.com/eric/css/edge/menus/demo.html), and also in my own hybrid version (http://www.brothercake.com/scripts/navmeister/page.php), that the li:hover colour change is fine in both, but the menus only work in Safari.

[Bosko]

Have you tried the very latest version of Konqueror from CVS?Because 3.0.3 isn't the latest.I doubt that Apple modified the CSS pseudo-classes code of KHTML.

[brothercake]

No I haven't; but I will :)