• 0

Cell Hovering


Question

5 answers to this question

Recommended Posts

  • 0

Javascript and CSS.

<html>
<head>
</head>
<body>
<table style="width:200px; border:1px solid #000000; height:50px">
<tr>
<td style="border:1px dashed #000000;text-align:center" onmouseover="this.style.background='#00BBFF'" onmouseout="this.style.background='#FFFFFF'"><span> one</span></td>
</tr>
<tr>
<td style="border:1px dashed #000000;text-align:center" onmouseover="this.style.background='#FFBB00'" onmouseout="this.style.background='#FFFFFF'"><span> two </span></td>
</tr>
<tr>
<td style="border:1px dashed #000000;text-align:center" onmouseover="this.style.background='#00FFBB'" onmouseout="this.style.background='#FFFFFF'"><span> three </span></td>
</tr>
</table>
<body>
</html>

This is just an example. It can be tidied up a great deal.

Link to comment
Share on other sites

  • 0

This is a bit more practical (dom) :

<html>
<head>
<title>hovercells</title>
<style>
table {
width:200px;
border:1px solid #000000;
height:50px
}
td {
border:1px dashed #000000;
text-align:center
}
</style>
<script type="text/javascript">
function cellhighlight(id,clr) 
{
document.getElementById(id).style.backgroundColor = clr;
}
function cellreturn(id)
{
document.getElementById(id).style.backgroundColor = '#FFFFFF';
}
</script>
</head>
<body>
<table>
<tr>
<td id="one" onmouseover="cellhighlight('one','#00BBFF')" onmouseout="cellreturn('one')"><span>one</span></td>
</tr>
<tr>
<td id="two" onmouseover="cellhighlight('two','#FFBB00')" onmouseout="cellreturn('two')"><span>two</span></td>
</tr>
<tr>
<td id="three" onmouseover="cellhighlight('three','#00FFBB')" onmouseout="cellreturn('three')"><span>three</span></td>
</tr>
</table>
</body>
</html>

This probably isnt how that site does it as there are a few other ways too.

You can use div:hover or something so no js is required.

I was just in a javascripty mood. ;)

Look here for CSS menu examples: http://www.meyerweb.com/eric/css/edge/

Edited by yashiro
Link to comment
Share on other sites

  • 0

On a related note, how to you make a whole cell a link? I only know how to make text and images links - can you put <a> tags around <td> tags? Or is there some onclick javascript you use?

Link to comment
Share on other sites

  • 0

You could use onclick="window.location.href='urlhere'"

It'd be easier to use a css method than resort to javascript though imo.

Try that site above it has some neat demos.

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.