CSS Menu with Table Cell Rollover

Is there a way to have a table cell highlight with color change where the cell contains a background image?

I have a table cell that uses a background image, when the mouse moves over the table cell changes color, but I don't know how to set the onMouseOut to nothing. So that the table cell appears as it did before the mouseover.

Hope this makes some kind of sense.

Thanks
greddinAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
jagadeesh_motamarriConnect With a Mentor Commented:
Hi greddin,

wanna include css seperately -

herez the code - http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_20943924.html

<html>
<head>
<style>
.classover {background-color: #ff0000;}
</style>
</head>

<body>
<table>
<tr>
   <td  onmouseover="this.className='classover'" onmouseout="this.className=''">aaa</td>
   <td  onmouseover="this.className='classover'" onmouseout="this.className=''">aaa</td>
</tr>
<tr>
   <td  onmouseover="this.className='classover'" onmouseout="this.className=''">aaa</td>
   <td  onmouseover="this.className='classover'" onmouseout="this.className=''">aaa</td>
</tr>
</table>

</body>
</html>

_______Jags.
0
 
jagadeesh_motamarriCommented:
... are u using css for  >> I have a table cell that uses a background image, when the mouse moves over the table cell changes color.

If so can u please post the code so that it will be easy to make necessary chances.

...one suggestion is u can take an id for that celll and use the hover effect on the particular cell.

_____Jags.
0
 
jagadeesh_motamarriCommented:
or else you simply use somthing like this

<tr style="background-color:'#D2D8F9'"  onmouseover="this.runtimeStyle.cssText='background-color:#FFCC66'" onmouseout="this.runtimeStyle.cssText=''" >


_____Jags.
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
greddinAuthor Commented:
Sure, here's what I have right now.

function ss_navBar( tableCellRef, hoverFlag, navStyle, strTextColor, strHoverTextColor, strHoverBackgroundColor, strBackgroundColor ) {
      if ( hoverFlag ) {
                      switch ( navStyle ) {
                  case 1:
                        tableCellRef.style.color = strHoverTextColor;
                        tableCellRef.style.backgroundColor = strHoverBackgroundColor;
                        tableCellRef.style.cursor = 'hand';
                        break;
                  default:
                        if ( document.getElementsByTagName ) {
                              tableCellRef.getElementsByTagName( 'a' )[0].style.color = '#CCCCCC';
                              tableCellRef.getElementsByTagName( 'a' )[0].style.cursor = 'hand';
                        }
            }
      } else {
            switch ( navStyle ) {
                  case 1:
                        tableCellRef.style.color = strTextColor;
                        tableCellRef.style.backgroundColor = strBackgroundColor;
                        tableCellRef.style.cursor = 'hand';
                        break;
                  default:
                        if ( document.getElementsByTagName ) {
                              tableCellRef.getElementsByTagName( 'a' )[0].style.color = '#CCCCCC';
                              tableCellRef.getElementsByTagName( 'a' )[0].style.cursor = 'hand';
                        }
            }
      }
}

function ss_goTo( url ) {
      window.location.href = url;
}

function ss_navBarClick( tableCellRef, navStyle, url ) {
      ss_navBar( tableCellRef, 0, navStyle );
      ss_goTo( url );
}


<table width='100%' cellspacing=0 cellpadding=0 border=1 style='color:#000000; background-image:url("/stellent/groups/public/documents/cnic_hq_image/cnic_gradient_bg.gif");  background-color:#ffffff;'>
<tr>
<td nowrap align=center style="padding:2px; font-family:verdana; font-style:normal; font-size:10px; font-weight:normal; color:#000000;" onmouseover=ss_navBar(this,1,1,'#000000','#cccccc','#eeeeee','#ffffff'); onclick=ss_navBarClick(this,1,'/cnic_hq_site/AboutCNIC/index.htm') onmouseout=ss_navBar(this,0,1,'#000000','#cccccc','#eeeeee','#ffffff')>About CNIC</td>
<td style="color:#000000;font-family:verdana;font-size:8pt;text-align:center;vertical-align:middle;white-space:nowrap;padding-top:1px;padding-bottom:1px;padding-left:1px;padding-right:1px;height:19px;">|</td>
<td nowrap align=center style="padding:2px; font-family:verdana; font-style:normal; font-size:10px; font-weight:normal; color:#000000;" onmouseover=ss_navBar(this,1,1,'#000000','#cccccc','#eeeeee','#ffffff'); onclick=ss_navBarClick(this,1,'/cnic_hq_site/Regions/index.htm') onmouseout=ss_navBar(this,0,1,'#000000','#cccccc','#eeeeee','#ffffff')>Regions</td>
<td style="color:#000000;font-family:verdana;font-size:8pt;text-align:center;vertical-align:middle;white-space:nowrap;padding-top:1px;padding-bottom:1px;padding-left:1px;padding-right:1px;height:19px;">|</td>
<td nowrap align=center style="padding:2px; font-family:verdana; font-style:normal; font-size:10px; font-weight:normal; color:#000000;" onmouseover=ss_navBar(this,1,1,'#000000','#cccccc','#eeeeee','#ffffff'); onclick=ss_navBarClick(this,1,'/cnic_hq_site/Library/index.htm') onmouseout=ss_navBar(this,0,1,'#000000','#cccccc','#eeeeee','#ffffff')>Library</td>
<td style="color:#000000;font-family:verdana;font-size:8pt;text-align:center;vertical-align:middle;white-space:nowrap;padding-top:1px;padding-bottom:1px;padding-left:1px;padding-right:1px;height:19px;">|</td>
<td nowrap align=center style="padding:2px; font-family:verdana; font-style:normal; font-size:10px; font-weight:normal; color:#000000;" onmouseover=ss_navBar(this,1,1,'#000000','#cccccc','#eeeeee','#ffffff'); onclick=ss_navBarClick(this,1,'/cnic_hq_site/CNICJobs/index.htm') onmouseout=ss_navBar(this,0,1,'#000000','#cccccc','#eeeeee','#ffffff')>CNIC Jobs</td>
<td style="color:#000000;font-family:verdana;font-size:8pt;text-align:center;vertical-align:middle;white-space:nowrap;padding-top:1px;padding-bottom:1px;padding-left:1px;padding-right:1px;height:19px;">|</td>
<td nowrap align=center style="padding:2px; font-family:verdana; font-style:normal; font-size:10px; font-weight:normal; color:#000000;" onmouseover=ss_navBar(this,1,1,'#000000','#cccccc','#eeeeee','#ffffff'); onclick=ss_navBarClick(this,1,'/cnic_hq_site/CompetitiveSourcing/index.htm') onmouseout=ss_navBar(this,0,1,'#000000','#cccccc','#eeeeee','#ffffff')>Competitive Sourcing</td>
<td style="color:#000000;font-family:verdana;font-size:8pt;text-align:center;vertical-align:middle;white-space:nowrap;padding-top:1px;padding-bottom:1px;padding-left:1px;padding-right:1px;height:19px;">|</td>
<td nowrap align=center style="padding:2px; font-family:verdana; font-style:normal; font-size:10px; font-weight:normal; color:#000000;" onmouseover=ss_navBar(this,1,1,'#000000','#cccccc','#eeeeee','#ffffff'); onclick=ss_navBarClick(this,1,'/cnic_hq_site/BRAC/index.htm') onmouseout=ss_navBar(this,0,1,'#000000','#cccccc','#eeeeee','#ffffff')>BRAC</td>
</tr>
</table>
0
 
jagadeesh_motamarriCommented:
...did u try my other solution
0
 
greddinAuthor Commented:
Yes, it didn't error, but it also didn't work either. Thank you.
0
 
jagadeesh_motamarriCommented:
Oh ...sorry about that code. Check out this -

CODE:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>




<table width="100" border="1">
  <tr>
    <td style=" background-color:#FF0000" onmouseover="this.style.backgroundColor='blue'" onmouseout="this.style.backgroundColor='red'">asdfasdfasjdfasjdl;f</td>
    <td>asdfasdfasjdfasjdl;f</td>
  </tr>
  <tr>
    <td>asdfasdfasjdfasjdl;f</td>
    <td>asdfasdfasjdfasjdl;f</td>
  </tr>
  <tr>
    <td>asdfasdfasjdfasjdl;f</td>
    <td>asdfasdfasjdfasjdl;f</td>
  </tr>
</table>

</body>
</html>

------try changing yours accordingly


_____Jags.
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.

All Courses

From novice to tech pro — start learning today.