Forum Moderators: open
What I'd like to know how to do is change the border of a table cell when the mouse moves into it. For once I actually was impressed by something Mr. Gate's clones did. On their homepage [microsoft.com] if you move you mouse over one of the news articles on the right hand side of the page it changes the border attribute of the cell....it actually puts a border on it(I guess it changes the colour of it actually).
How's this done then? What's the property tag I'm after?
Rich
<html>
<head>
<style>
.borderOn{ border: solid 1px green;}
.borderOff { border:solid 1px white;}
</style>
</head><body>
<table onMouseOver="this.className='borderOn'" onMouseOut="this.className='borderOff'" class="borderOff">
<tr>
<td>Test table</td>
</tr>
</table>
</body>
</html>
It'll only work in browsers with solid CSS support (IE4+, nn6, not sure about Opera).
You can also apply the same events to individual table cells.
Brian
From what I can discover on this page [opera.com], className is actually jscript (Microsoft's propietary thingy) and not standard JavaScript/ECMAscript. Opera says they support it when Explorer is set as the UA, but still I don't see the border color change. Maybe they only support read, not write.
Here's another clue [xs4all.nl]. This author says:
x.className
The value of attribute CLASS of node x. If the node doesn't have a class, it is empty.
Can also be set: x.className="name". When this is done the style of the element also changes to the new class, except in Opera.
<aside> If you do a Google search on 'classname property', some poor Real Estate guy gets a keyword impression on his text ad.</aside>
