Solved

Mouseover of cell in a grid with a hyperlink

Posted on 2002-06-21
6
205 Views
Last Modified: 2010-04-09
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
Comment
Question by:curtis591
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
6 Comments
 
LVL 10

Expert Comment

by:dij8
ID: 7099726
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
 
LVL 17

Accepted Solution

by:
dorward earned 100 total points
ID: 7100586
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7100714
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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 6

Author Comment

by:curtis591
ID: 7104145
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7104392
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
 
LVL 6

Author Comment

by:curtis591
ID: 7104454
Why am I not suprised? I think Netscrap defines that perfectly.  
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

734 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