homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

Changing the border of a table cell onMouseOver
Just like on the (urgh) Microsoft homepage

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

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?




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

.borderOn{ border: solid 1px green;}
.borderOff { border:solid 1px white;}

<table onMouseOver="this.className='borderOn'" onMouseOut="this.className='borderOff'" class="borderOff">
<td>Test table</td>

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.


 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.



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

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)

Doesnt seem to work in Opera eiter.


 1:12 pm on Oct 23, 2001 (gmt 0)

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)


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:

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>

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved