Welcome to WebmasterWorld Guest from 54.167.185.18

Forum Moderators: incrediBILL

Message Too Old, No Replies

Changing the border of a table cell onMouseOver

Just like on the (urgh) Microsoft homepage

   
8:26 am on Oct 23, 2001 (gmt 0)

10+ Year Member



How Odd! I searched for something on WebmasterWorld and I couldn't find an answer. Oh well, I 'spose I'm going to have to set up a thread myself! Such a pain ;)

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

9:35 am on Oct 23, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member




<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.

GWJ

11:20 am on Oct 23, 2001 (gmt 0)



Just for grins tested on NN 4.x (CSS level 1). No dice. Very nice effect though.

Brian

11:23 am on Oct 23, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Not a chance in NN4. For a start its event handling is fairly abysmal and I think they only supported CSS level 0.25;)
1:08 pm on Oct 23, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Doesnt seem to work in Opera eiter.
1:12 pm on Oct 23, 2001 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



It seems Opera is unable to access the .className property. Perhaps opera calls this something else in scripting - any Opera fans out there?
6:24 pm on Oct 23, 2001 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Hmmm....

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>

 

Featured Threads

Hot Threads This Week

Hot Threads This Month