Solved

Change hyperlink color onmouseover table cell

Posted on 2001-08-15
20
521 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
ID: 6390000
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
ID: 6390707
lets stop supporting ns4
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6392030
And NS6.0 since it also sucks at image replacement :(
0
Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

 

Expert Comment

by:eilloc
ID: 6392033
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
ID: 6392108
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
ID: 6392138
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
ID: 6392152
Any alternative on using images to achieve the initial goal? And forget the unconditional part...
0
 

Expert Comment

by:eilloc
ID: 6392153
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
ID: 6392163
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
ID: 6392227
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
 

Expert Comment

by:eilloc
ID: 6392294
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
ID: 6392316
Thanks :D

Michel
0
 

Author Comment

by:ibec
ID: 6392325
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
ID: 6392359
<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
ID: 6392362
Sorry - the first out should be over
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 6392371
<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
ID: 6392374
And this:
<style>
#LC1 { color:white }
#LC2 { color:white }
</style>
0
 

Author Comment

by:ibec
ID: 6393147
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
ID: 6393244
Goed, zeg!

Michel
0
 

Author Comment

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

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

Featured Post

Microsoft Certification Exam 74-409

Veeam® is happy to provide the Microsoft community with a study guide prepared by MVP and MCT, Orin Thomas. This guide will take you through each of the exam objectives, helping you to prepare for and pass the examination.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…

832 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