Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 215
  • Last Modified:

Mouseover of cell in a grid with a hyperlink

I have the following code.  When I move into the orange part of the cell I want the writing to turn white.  How do I do this?  If I remove the <a> tag it works ok.  When I have the <a> tag it only works when I am over the writing.  

<html>
<head>
<title>Safety Information</title>
<style>
  .overclass {color:white}
  .outclass {color:black}
  a:hover {color:white}
</style>
</head>
<body topmargin=0>
<table border="0" width="94%" cellspacing="2" cellpadding="0">
<tr>
  <td height = 25 width="100%" class="outclass" onMouseover="this.className='overclass'"  onMouseout="this.className='outclass'" bgcolor="FF6600">
  <a href="mypage.asp" style="text-decoration: none;"><font face="Arial" size=3><b>&nbsp;&nbsp;My Page</b></font></a>
    </td>
  </tr>
</table>
</body>
</html>
0
curtis591
Asked:
curtis591
1 Solution
 
dij8Commented:
This will do what you want.  It is an IE only solution (as was yours already anyway).

<html>
<head>
<title>Safety Information</title>
<style>
 .outclass {color:black;background-color:#FF6600;cursor:pointer;text-decoration:none;font-size:medium;font-weight:bold;font-family:arial;}
 .overclass {color:white;background-color:#FF6600;cursor:hand;text-decoration:none;font-size:medium;font-weight:bold;font-family:arial;}
</style>
</head>
<body topmargin=0>
<table border="0" width="94%" cellspacing="2" cellpadding="0">
<tr>
 <td height = 25 width="100%" class="outclass" onmouseover="this.className='overclass';status='mypage.asp';return true;" onmouseout="this.className='outclass';status='';return true;" onclick="location.href='mypage.asp'">
 &nbsp;&nbsp;My Page 2
   </td>
 </tr>
</table>
</body>
</html>
0
 
dorwardCommented:
Pure CSS solution (doesn't need JavaScript at all):

<html>
<head>
<title>Safety Information</title>
<style>
body { margin-top: 0; }

#myTable {
  border: none;
  width: 94%;
}

#myTable td {
  height: 25px;
  width: 100%;
  background-color: #f60;
}

#myTable a {
 display: block;
 width: 100%;
 height: 100%;
 color: black;
 text-decoration: none;
 font-family: Arial, sans-serif;
 font-weight: bold;
 font-size: 0.8em;
}

#myTable a:link {
  color: black;
}

#myTable a:visited {
  color: #111;
}

#myTable a:hover {
  color: white;
}

#myTable a:active {
  color: red;
}
</style>
</head>
<body>
<table cellspacing="2" cellpadding="0" id="myTable">
<tr><td><a href="mypage.asp">My Page</a></td></tr>
</table>
</body>
</html>

0
 
COBOLdinosaurCommented:
It just needs asmall adjustment in the styles:

<html>
<head>
<title>Safety Information</title>
<style>
.overclass a:hover{color:white}
.outclass {color:black}
a {color:black}
</style>
</head>
<body topmargin=0>
<table border="0" width="94%" cellspacing="2" cellpadding="0">
<tr>
<td height = 25 width="100%" class="outclass" onMouseover="this.className='overclass'" onMouseout="this.className='outclass'" bgcolor="FF6600">
<a href="mypage.asp" style="text-decoration: none;"><font face="Arial" size=3><b>&nbsp;&nbsp;My Page</b></font></a>
</td>
</tr>
</table>
</body>
</html>

However, I would incorporate font bold tags in the CSS.  Using old style formatting tags in the same page as CSS makes it difficult to maintain , can confuse the browser if they are in conflict.

Cd&
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
curtis591Author Commented:
Thanks for all you feed back,  I did get this working eventually and I like the total css way.  Is there a way that to get CSS's working in the wonderful Netscape browser without an enormous amount of code (I'm kidding about the wonderful part).  If this can't be done easily please don't bother with showing me all the code because we got rid of Netscape but I'm curious about other possibilities for internet solutions.
0
 
COBOLdinosaurCommented:
Doing it in Netscrap 4.x takes a bunch of really ugly scripting.  It does not support hover, or mouse over on a cell.  To do the color change you have to have the links in a layer and re-write the layer.  Layers have to be absolutely position, and NS calculate the position from window, not the containing element, so in order for it to work inside of a cell it takes additional code to handle positioning and to deal with resolution and screen size problems.  Then to top it all off.  You also have to re-write the the layers for IE as well because the two mothods cannot co-exist.  It is either re-write the layers for all browsers or use separate pages.  Be glad you got rid of Netscrap.

Cd&
0
 
curtis591Author Commented:
Why am I not suprised? I think Netscrap defines that perfectly.  
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.

Join & Write a Comment

Featured Post

What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now