Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Tablecell Mouseover 1

Status
Not open for further replies.

jackyl

Programmer
Oct 23, 2001
44
CA
Good morning ...

I have made a column of table cells that each have a text link in them ... I have it set now that when the table cell is moused ocer the background goes from light grey to medium grey.

When I mouse over the text it goes from red to white.

(Ya, I know ... it's ugly)

my problem is when I mouse over the cell, but not the text ... I still have the red text with the medium grey box. and this is no good ...

Below is my code.

<style type=&quot;text/css&quot;>
.nav { color: CC0000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; text-decoration: none; font-weight: bold;}
.nav:Hover {color: FFFFFF;}
.cell_overmain { BACKGROUND-COLOR: 999999 }
.cell_outmain { BACKGROUND-COLOR: CCCCCC }
</style>

AND IN THE BODY

<td width=&quot;148&quot; onmouseover=&quot;this.className='cell_overmain';&quot; onmouseout=&quot;this.className='cell_outmain';&quot;><a href=&quot;&quot; class=&quot;nav&quot;>About Us</a></td>

Any help would be appreciated.
M...
 
Does this work???

.cell_overmain:link { COLOR: yellow;}
.cell_outmain:link { COLOR: green;} Get the Best Answers! faq333-2924
&quot;A witty saying proves nothing.&quot; - Voltaire
mikewolf@tst-us.com
 
Afraid not ... when I mouse over the table cell, the text doesn't change unless I move over the text ...

Do I need some way to connect the two???
 
Rather than an href, you could have plain text in the cell and have the whole cell be clickable.....

<td width=&quot;148&quot; onmouseover=&quot;this.className='cell_overmain';&quot; onmouseout=&quot;this.className='cell_outmain';&quot;
onClick=&quot;document.location='newLocation.htm'>About Us</td>

<style>
.cell_overmain { BACKGROUND-COLOR: 999999; color:yellow; }
.cell_outmain { BACKGROUND-COLOR: CCCCCC; color:blue; }
</style> Get the Best Answers! faq333-2924
&quot;A witty saying proves nothing.&quot; - Voltaire
mikewolf@tst-us.com
 
one more small question ...

this doesn't seem to be working in Netscape 4.7 ...
is there an easy fix for this?

(or did I just do something wrong?)

J...
 
I'm not sure if &quot;this.className&quot; works in NN4.7 (sounds like it doesn't) Sorry! Get the Best Answers! faq333-2924
&quot;A witty saying proves nothing.&quot; - Voltaire
mikewolf@tst-us.com
 
Not a big worry ...
The most important part is the onclick ... to get to the other sections....

Does anyone have a solution that I could use for this?
 
onClick doesn't work in NN4.7 either? Get the Best Answers! faq333-2924
&quot;A witty saying proves nothing.&quot; - Voltaire
mikewolf@tst-us.com
 
try this

onmouseover=&quot;this.style.background='color'&quot;

and then use

onmouseout=&quot;this.style.background='color'&quot;

to restore [soapbox]
sleep is good
 
Ok expanding on this a bit I tried the code mwolf00 gave and the first table cell disappeared and the second one down highlighted....so I went ahead and tried the next suggestion using the this.style.background

Here is my code

<tr><td onmouseover=&quot;this.style.background='#e6e6fa'&quot; onmouseout=&quot;this.style.background='#dff7e8'&quot; onClick=&quot;document.location='index.html'&quot;
><b><a href=&quot;index.html&quot;>Home</a></td></tr>

This works nice, one question is can I add a border around the td ononmouseover to appear as well?

Thanks

Moira
&quot;Those that stop learning, stop living.&quot;
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top