Metal Head Posted April 13, 2003 Share Posted April 13, 2003 hey if you look there http://entertainment.real.com/ on the left menu you can see that when you mouse over a cell the background changes colour. How is it done? I've been searching and seems to be getting nothing. Thanks :unsure: Link to comment Share on other sites More sharing options...
0 yashiro Posted April 13, 2003 Share Posted April 13, 2003 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 More sharing options...
0 yashiro Posted April 13, 2003 Share Posted April 13, 2003 (edited) 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 April 13, 2003 by yashiro Link to comment Share on other sites More sharing options...
0 Metal Head Posted April 13, 2003 Author Share Posted April 13, 2003 Thanks :) Link to comment Share on other sites More sharing options...
0 Quboid Posted April 13, 2003 Share Posted April 13, 2003 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 More sharing options...
0 yashiro Posted April 13, 2003 Share Posted April 13, 2003 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 More sharing options...
Question
Metal Head
hey if you look there http://entertainment.real.com/ on the left menu you can see that when you mouse over a cell the background changes colour. How is it done? I've been searching and seems to be getting nothing.
Thanks :unsure:
Link to comment
Share on other sites
5 answers to this question
Recommended Posts