table mouse over

**SniperUK** · Oct 12, 2000 12:16

Ok I see alot of sites where when you go over a table it changes colour. I can get the code but i just want a neater version of the code! so can some one plz post it here!

Thanks Alot

**TWTCommish** · Oct 12, 2000 12:27

Neater than what?

Needs to be in comparison to something...

DynamicDrive.com has what you're looking for...
http://www.dynamicdrive.com/dynamici...lighttable.htm

**Fletch** · Oct 12, 2000 13:40

Hi,

You can also do the same thing by using CSS which uses a lot less code. If you put this in the <head> of the document:

Code:

<STYLE type=text/css>
A.link:hover { BACKGROUND-COLOR: #******; TEXT-DECORATION: none; }
</style>

Change ****** with the colour code of the colour you want the table to change too. And then all you need to do then is put a link in a cell with this code:

Code:

<a href="link/to/page.html class="link">Link Text</a>

Hope that works

but please note the above code is not compatible with Netscape 4.7 but I am not sure whether or not it will be compatible with NS 6

[Edited by Fletch on 10-12-2000 at 02:45 PM]

**TWTCommish** · Oct 12, 2000 13:49

Won't that hightlight just the background behind the text, and not the whole table cell?

**SniperUK** · Oct 12, 2000 14:11

Fletch I think that code *only* changes the backround of the text! Thanks TWTCommish I will have a look, did'nt think they would have it.

**Fletch** · Oct 12, 2000 14:43

Hi,

Yeah sorry I was being dumn there, I forgot about that only highlighting behind the text. I'm sure I did it with CSS a while ago but I must be confussed.

Sorry

**hmahonen** · Oct 12, 2000 15:49

You must mean the thing like in for example http://www.anandtech.com - or similar anyway.

It's rather easy. Here's a small example, which should clear things up a bit:

Code:

<table width="450" cellspacing="0" cellpadding="0" border="0">
<tr>
<td onmouseover="this.style.background='#FF0000'" onmouseout="this.style.background='#EFEFEF'" align="center" bgcolor="#EFEFEF" width="150">
<a href="">Link</a>
</td>
<td onmouseover="this.style.background='#FF0000'" onmouseout="this.style.background='#FFFFFF'" align="center" bgcolor="#FFFFFF" width="150">
<a href="">Link</a>
</td>
<td onmouseover="this.style.background='#FF0000'" onmouseout="this.style.background='#EFEFEF'" align="center" bgcolor="#EFEFEF" width="150">
<a href="">Link</a>
</td>
</tr>
</table>

Notice the two Javascript events, onmouseover and onmouseout.

Just add it to the table cells and it should work.

**TWTCommish** · Oct 12, 2000 15:55

Wow, great job hmahonen! Is it okay if someone like, uh, say, myself uses that on a site?

**SniperUK** · Oct 12, 2000 16:21

Hey thanks thats a great code!!!
Does it work with NS or is it just IE.
Thanks Again

**hmahonen** · Oct 12, 2000 16:57

TWTCommish: Actually even if I just wrote it out of my head, I've seen it somewhere before, but feel free to use it as much as you dare to

Luqman: No, it doesn't work in Netscape, because it uses CSS to define the color for the background.

**SniperUK** · Oct 12, 2000 17:26

Thanks Again
This is a better code than the dynamic drive. I'll let you know if i have prob's.

100 Posts At This Point For Me!

**Vincent Puglia** · Oct 12, 2000 22:58

Hi Lugman,

Actually, if I remember right, there is a NN ver 4 solution. If you go to news:comp.lang.javascript and look for a Martin Honnen, he has it.

Vinny

**SniperUK** · Oct 13, 2000 13:08

Thanks Vin i'll have a look, the above code does work on Netscape 6 P2.

**Vincent Puglia** · Oct 13, 2000 21:48

Hi Lugman,

Hope you find him. I haven't been there in a while, so I'm not sure he's still posting. You might also try dejavu.com

I'm not surprised it works for NN6.

Vinny

**SniperUK** · Oct 19, 2000 17:37

thanks

User Tag List

Thread: table mouse over

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions