Solved

Change hyperlink color onmouseover table cell

Posted on 2001-08-15
20
518 Views
Last Modified: 2008-03-03
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)?
0
Comment
Question by:ibec
  • 10
  • 5
  • 4
  • +1
20 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
 
LVL 8

Expert Comment

by:bebonham
Comment Utility
lets stop supporting ns4
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
And NS6.0 since it also sucks at image replacement :(
0
 

Expert Comment

by:eilloc
Comment Utility
I third that, lets bomb out netscape!

Nahh!  It gives all us developers lots of fun trying to get it to work!
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
 

Expert Comment

by:eilloc
Comment Utility
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
 

Author Comment

by:ibec
Comment Utility
Any alternative on using images to achieve the initial goal? And forget the unconditional part...
0
 

Expert Comment

by:eilloc
Comment Utility
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
 

Expert Comment

by:eilloc
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 

Expert Comment

by:eilloc
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Thanks :D

Michel
0
 

Author Comment

by:ibec
Comment Utility
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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
<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
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Sorry - the first out should be over
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
<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
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 50 total points
Comment Utility
And this:
<style>
#LC1 { color:white }
#LC2 { color:white }
</style>
0
 

Author Comment

by:ibec
Comment Utility
Thanks man! View the initial result @ http://www.frosalits.nl/

(it's a Dutch family website; 13! children)
0
 
LVL 75

Expert Comment

by:Michel Plungjan
Comment Utility
Goed, zeg!

Michel
0
 

Author Comment

by:ibec
Comment Utility
Thanks man! View the initial result @ http://www.frosalits.nl/

(it's a Dutch family website; 13! children)
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now