homepage Welcome to WebmasterWorld Guest from 54.204.67.26
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor
Visit PubCon.com
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
TheLynxEffect




msg:610637
 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?

Rich

 

joshie76




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


<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




msg:610639
 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

joshie76




msg:610640
 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;)

ggrot




msg:610641
 1:08 pm on Oct 23, 2001 (gmt 0)

Doesnt seem to work in Opera eiter.

joshie76




msg:610642
 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?

tedster




msg:610643
 6:24 pm on Oct 23, 2001 (gmt 0)

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>

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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved