Change hyperlink color onmouseover table cell

I've table cells that contain hyperlinks. Initially, the background of each cell has the same color as the hyperlinks (so you don't see any hyperlink when the mouse is not within a specific cell). Now, when moving the mouse over a specific cell, I want all hyperlinks within that cell to change in color (i.e. highlight effect).

How can this be achieved (preferably to work unconditionally with all browsers)?
ibecAsked:
Who is Participating?
 
Michel PlungjanConnect With a Mentor IT ExpertCommented:
And this:
<style>
#LC1 { color:white }
#LC2 { color:white }
</style>
0
 
Michel PlungjanIT ExpertCommented:
Use images.

It is a PITA to get to work in all browsers.
With image rollovers it will work in the greatest number of browsers.

Michel
0
 
bebonhamCommented:
lets stop supporting ns4
0
Cloud Class® Course: CompTIA Healthcare IT Tech

This course will help prep you to earn the CompTIA Healthcare IT Technician certification showing that you have the knowledge and skills needed to succeed in installing, managing, and troubleshooting IT systems in medical and clinical settings.

 
Michel PlungjanIT ExpertCommented:
And NS6.0 since it also sucks at image replacement :(
0
 
eillocCommented:
I third that, lets bomb out netscape!

Nahh!  It gives all us developers lots of fun trying to get it to work!
0
 
Michel PlungjanIT ExpertCommented:
Some developers (like me) are not allowed to ignore netscape. Also it is only weird things like the above which is not working well in netscape. Anything static works ok

Michel
0
 
eillocCommented:
Tell me about it!  It takes approx half the time to develop any app and get it working for IE (including all the coding etc) and then the other half to get it to work in Netscape!

Probably doin things the wrong way round but what can I say, I am a Microsoft Baby, and not by bloomin by choice!
0
 
ibecAuthor Commented:
Any alternative on using images to achieve the initial goal? And forget the unconditional part...
0
 
eillocCommented:
Back to the question,

You won't get an onMouseOver event to work in Netscape 4 ish.  Doesn't support it as far as I can see so your only choice is to do onMouseOver on the actual links.

On mousing over one of these links, you could call a script that branches out depending on browser and version that then uses the style property to change the BG of the table cell.

To be honest, I given a shot in the distant past and it did not work to well.

Netscape is well patchy on the implemention of its style sheets and changing the properties dynamically.

It's kinda hit and miss with it with some of the style propertyies working and some not.

For a good indication of what works and what does not, go to the following site (no association with myself!) where it at least gives you a good rundown on the what works and where.  Choose the 'Index DOT Html' or 'Index DOT Css' which (as described by them and pretty much agreed with by me!) is 'The Ultimate HTML/CSS Resource'

<a href="http://www.blooberry.com/" target="_blank">Blooberry</a>

(Hope writing a link works in this MB)

Hope it helps!
0
 
eillocCommented:
Posted at the same time IBEC

Alternative is to write two stylesheets, one for NN4 and one for IE.  Branch for them on page load alah-

<script language="Javascript"><!--
     if (document.layers) {
          document.write("<link rel=\"stylesheet\" href=\"../styles/section_copy_nn4.css\" type=\"text/css\">");
     } else {
          document.write("<link rel=\"stylesheet\" href=\"../styles/section_copy.css\" type=\"text/css\">");
     }
//--></script>

Design for IE and when NN4 down is sensed choose the stylesheet (see code above) for NN which will display the links in a diff color to the BG cell.

With IE (and I think NN6) you can then do a onMouseover in the <TD> tag and change the table cell background color dynamically.
0
 
Michel PlungjanIT ExpertCommented:
No way to change the color of a table cell using CSS in NS4
ONLY way is to have an ILAYER with a nested LAYER and change the html in it. - it will probably look quite bad.

In IE it is sooo simple:

<table><tr><td onmouseover="this.style.backgroundColor='red'"
onmouseout="this.style.backgroundColor='white'"
>hello</td></tr></table>


Michel
0
 
eillocCommented:
Respect mplungjan!

IRT's where I cut my teeth in Javascript and is an excellent reference that I always send people to when they want to learn aboot the script that is java(script)
0
 
Michel PlungjanIT ExpertCommented:
Thanks :D

Michel
0
 
ibecAuthor Commented:
I don't want to change the background color of a table cell, I want to change the color of all the hyperlinks within a cell once the mouse is within the cell.
0
 
Michel PlungjanIT ExpertCommented:
<table><tr><td
onmouseout="document.all('link1').style.color='red'"
onmouseout="document.all('link1').style.color='white'"
><a href="#" id="link1">Hello</a></td></tr></table>

0
 
Michel PlungjanIT ExpertCommented:
Sorry - the first out should be over
0
 
Michel PlungjanIT ExpertCommented:
<script>
function swap(linkId,col) {
lnks = document.all(linkId);
for (i=0;i<lnks.length;i++) lnks(i).style.color=col;

}
</script>

<table><tr>
<td
onmouseover="swap('LC1','red')"
onmouseout="swap('LC1','white')">
<a href="#" id="LC1">Link 1</a>
<a href="#" id="LC1">Link 2</a>
<a href="#" id="LC1">Link 3</a>
<a href="#" id="LC1">Link 4</a>
</td>
<td
onmouseover="swap('LC2','red')"
onmouseout="swap('LC2','white')">
<a href="#" id="LC2">Link 1</a>
<a href="#" id="LC2">Link 2</a>
<a href="#" id="LC2">Link 3</a>
<a href="#" id="LC2">Link 4</a>
</td>
</tr></table>
0
 
ibecAuthor Commented:
Thanks man! View the initial result @ http://www.frosalits.nl/ 

(it's a Dutch family website; 13! children)
0
 
Michel PlungjanIT ExpertCommented:
Goed, zeg!

Michel
0
 
ibecAuthor Commented:
Thanks man! View the initial result @ http://www.frosalits.nl/ 

(it's a Dutch family website; 13! children)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.