• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 551
  • Last Modified:

Background color change and hover for table cells.

Not sure if this is Javascript, DHTML or CSS. As long as it works in IE 5+ and Netscape 6+, I'm ok with it.

I have 4 nav buttons:

-------------------------------------
      Link 1         |      Link 2      |
-------------------------------------
     Link 3          |      Link 4      |
-------------------------------------

When you hover anywhere in the cell, it should change color and allow you to click it. We are only using CSS to make the buttons, not images. In other words, I don't want to have to hover over the link, just the background. Thanks in advance!
0
jashall
Asked:
jashall
  • 3
1 Solution
 
BatalfCommented:
Example:

<style type="text/css">
.cellOver{
    background-color:#FF0000;
}
.cell{
    background-color:#FFFFFF;
}
</style>
<table border="0">
    <tr>
        <td onmouseover="this.className='cellOver'" onmouseout="this.className='cell'" class="cell"><a href="http://www.domain.com">Test</a></td>
        <td onmouseover="this.className='cellOver'" onmouseout="this.className='cell'" class="cell"><a href="http://www.domain.com">Test</a></td>
    </TR>
    <tr>
        <td onmouseover="this.className='cellOver'" onmouseout="this.className='cell'" class="cell"><a href="http://www.domain.com">Test</a></td>
        <td onmouseover="this.className='cellOver'" onmouseout="this.className='cell'" class="cell"><a href="http://www.domain.com">Test</a></td>
    </TR>
</table>
0
 
jashallAuthor Commented:
It is only clickable if I hover over the text, not anywhere in the cell. Put  width="200" into each TD cell and center the text in each TD. Then, try to hover over the left or right side of the cell or 'button. I need these cells to act like buttons. Most likely, they will have a width of 100 and heigh of 50 or something like that. Thanks!
0
 
BatalfCommented:
It's probably better to use <div> objects.

Example:

<style type="text/css">
.buttonPane div{
      width:100px;
      height:50px;
      border:1px solid #000000;
      float:left;
      vertical-align:middle;
      text-align:center;
      margin:2px;
}
.buttonPane div span{
      line-height:50px;
}
.buttonOn{
      background-color:#FF0000;
}
.buttonOff{
      background-color:#FFFFFF;
}
.buttonPane{
      width:212px;
      height:112px;

}
</style>
<div class="buttonPane">
      <div class="buttonOff" onmouseover="this.className='buttonOn'" onmouseout="this.className='buttonOff'" onclick="location.href='http://www.domain.com'"><span>Button</span></div>
      <div class="buttonOff" onmouseover="this.className='buttonOn'" onmouseout="this.className='buttonOff'" onclick="location.href='http://www.domain.com'"><span>Button</span></div>
      <div class="buttonOff" onmouseover="this.className='buttonOn'" onmouseout="this.className='buttonOff'" onclick="location.href='http://www.domain.com'"><span>Button</span></div>
      <div class="buttonOff" onmouseover="this.className='buttonOn'" onmouseout="this.className='buttonOff'" onclick="location.href='http://www.domain.com'"><span>Button</span></div>
</div>
0
 
BatalfCommented:
and you could also put in cursor:pointer on the <div> object:

i.e. modify the ".buttonPane div" part to:

.buttonPane div{
      width:100px;
      height:50px;
      border:1px solid #000000;
      float:left;
      vertical-align:middle;
      text-align:center;
      margin:2px;
      cursor:pointer;
}
0

Featured Post

Become an Android App Developer

Ready to kick start your career in 2018? Learn how to build an Android app in January’s Course of the Month and open the door to new opportunities.

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