ibec
asked on
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)?
How can this be achieved (preferably to work unconditionally with all browsers)?
lets stop supporting ns4
And NS6.0 since it also sucks at image replacement :(
I third that, lets bomb out netscape!
Nahh! It gives all us developers lots of fun trying to get it to work!
Nahh! It gives all us developers lots of fun trying to get it to work!
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
Michel
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!
Probably doin things the wrong way round but what can I say, I am a Microsoft Baby, and not by bloomin by choice!
ASKER
Any alternative on using images to achieve the initial goal? And forget the unconditional part...
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<
(Hope writing a link works in this MB)
Hope it helps!
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<
(Hope writing a link works in this MB)
Hope it helps!
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_c
} else {
document.write("<link rel=\"stylesheet\" href=\"../styles/section_c
}
//--></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.
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_c
} else {
document.write("<link rel=\"stylesheet\" href=\"../styles/section_c
}
//--></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.
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.ba
onmouseout="this.style.bac
>hello</td></tr></table>
Michel
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.ba
onmouseout="this.style.bac
>hello</td></tr></table>
Michel
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)
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)
Thanks :D
Michel
Michel
ASKER
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.
<table><tr><td
onmouseout="document.all('
onmouseout="document.all('
><a href="#" id="link1">Hello</a></td><
onmouseout="document.all('
onmouseout="document.all('
><a href="#" id="link1">Hello</a></td><
Sorry - the first out should be over
<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','r
onmouseout="swap('LC1','wh
<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','r
onmouseout="swap('LC2','wh
<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>
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','r
onmouseout="swap('LC1','wh
<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','r
onmouseout="swap('LC2','wh
<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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks man! View the initial result @ http://www.frosalits.nl/
(it's a Dutch family website; 13! children)
(it's a Dutch family website; 13! children)
Goed, zeg!
Michel
Michel
ASKER
Thanks man! View the initial result @ http://www.frosalits.nl/
(it's a Dutch family website; 13! children)
(it's a Dutch family website; 13! children)
It is a PITA to get to work in all browsers.
With image rollovers it will work in the greatest number of browsers.
Michel