Changing Background/Border on Cell Rollover!! Pls Help

[Forri]

Hi All

I would liek that when i rollover a certain cell the background color changes and a border is shown. To do this i used the following javascript code, which i know that it can be handled by CSS (thats what i'm asking)

<script language="javascript">
  function highlightCell(link, isHighligh){
    if(isHighligh){
      link.parentElement.style.border = "3px solid  #31659C";
      link.parentElement.style.backgroundColor = "#D8D8D8";
      }
    else{
      link.parentElement.style.backgroundColor = "white";
      link.parentElement.style.border = "0px solid #000000";
    }
  }
</script>

The Above works perfectly on a fresh html page, but when i insert it into my proper page, the background shows but the border does not! How can i fix it so as the border will show too!

Thanks
Nick

 

[BillyRayPreachersSon]

>> The Above works perfectly on a fresh html page, but when i insert it into my proper page, the background shows but the border does not!

How about showing us the code for the page it's breaking on? If it works for you in a fresh page, chances are it'll work for us in a fresh page. Which kind of makes it hard to debug.

Dan

 

[simonchristieis]

try something like this:

  <tr><td 
onMouseOver="this.parentElement.style.backgroundColor=(this.parentElement.style.backgroundColor=='#d8d8d8')?'#ffffff':'#d8d8d8';this.parentElement.style.border=(this.parentElement.style.border=='3px solid  #31659C')?'0px solid #000000':'3px solid  #31659C';" 
onMouseOut="this.parentElement.style.backgroundColor=(this.parentElement.style.backgroundColor=='#d8d8d8')?'#ffffff':'#d8d8d8';this.parentElement.style.border=(this.parentElement.style.border=='3px solid  #31659C')?'0px solid #000000':'3px solid  #31659C';" 
>test</td>

hope this helps

simon

 

[frainbreeze]

another way of doing it using css could be this:

in your css sheet have:

td.off {
 background: #FFFFFF;
 border: 0px solid #000000;
}

td.on {
 background: #D8D8D8;
 border: 3px solid ##31659C;
}

then in your code call the classes & mouseovers like this:

<td class="off" onmouseover="this.className='on'" onmouseout="this.className='off'"><a href="yourlink.htm" class="menu">This is a Link</a></td>

it'll fill the background and make the border around each <td>.

hope that helped

 

[vongrunt]

Another trick: expand A to fit cell height/width and use :hover pseudo-class:

<style type="text/css">
.sometable a	{ width: 100%; height: 100%; border: 3px solid white; }
.sometable a:hover	{ background-color: #d8d8d8; border: 3px solid #31659C; }
</style>

<table class="sometable" border="0" cellpadding="2" cellspacing="0">
<tr><td><a href="#">Blah 1</a></td></tr>
<tr><td><a href="#">Blah 2</a></td></tr>
<tr><td><a href="#">Blah 3</a></td></tr>
</table>