|
|
Who can I create a CSS style for a table in which the cell will be of a color, but when you put the mouse over a cell, that cell changes into another color?
I though that I could use onmouseover, but I don't know how to put a bgcolor in it... 
It is with onmouseover, ummm
| Code: | | onmouseover="this.style.backgroundImage='url(test2.png)';" onmousedown="this.style.backgroundImage='url(test3.png)';" onmouseup="this.style.backgroundImage='url(test2.png)';" onmouseout="this.style.backgroundImage='url(test1.png)';" |
I used that before to change images, I think
| Code: | | onmouseover="this.style.backgroundcolor='#FFFFFF';" onmousedown="this.style.backgroundcolor='#000000';" onmouseup="this.style.backgroundcolor='#FF0000';" onmouseout="this.style.backgroundcolor='#00FF00';" |
It also has it change when they click but you can get rid of that part. Let me know if that didn't work.
| alalex wrote: | Who can I create a CSS style for a table in which the cell will be of a color, but when you put the mouse over a cell, that cell changes into another color?
I though that I could use onmouseover, but I don't know how to put a bgcolor in it... |
Very best way would be to use the :hover pseudo-selector of CSS, but that only works for <a..> in Internet Explorer 6-. So yeah, you'd need to use onmouseover. The way that's the least clumsy in terms of HTML (i.e., you don't have to have lots of onmouseover attributes in your HTML code)...
Your stylesheet (let's call it cellhover.css):
| Code: |
td {
padding: 20px; /* Just to show the cells better... */
background-color: #990000;
color: #ffffff;
}
/* Only table cells inside a table with the class "hovertable" will have the effect: */
.hovertable td.over {
background-color: #000000;
}
|
Your javascript (let's call it cellhover.js):
| Code: |
function cellOver()
{
// For simplicity, we assume there's only one possible class for the cell.
this.className = "over";
}
function cellOut()
{
// For simplicity, we assume there's only one possible class for the cell.
this.className = "";
}
function initCells()
{
var cells = document.getElementsByTagName("TD");
for (var n = 0; n < cells.length; n++)
{
// Better to use an addEvent variation here, but this is just an example.
// We add these event handlers to all cells on the page, even if some
// of them won't have the effect applied. This is not the most efficient,
// but it works, as long as the CSS only defines the "over" class for
// children of a "hovertable" class table.
cells[n].onmouseover = cellOver;
cells[n].onmouseout = cellOut;
}
}
// Better to use an addEvent variation here, but this is just an example)
window.onload = initCells;
|
Your HTML:
| Code: |
<html>
<head>
<title>Table Hover</title>
<script type="text/javascript" src="cellhover.js"></script>
<link href="cellhover.css" rel="stylesheet" type="text/css">
</head>
<body>
<table class="hovertable">
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td><a href="#">Cell 4 with a link</a></td>
</tr>
</table>
<!--
Just another table to show that you can have tables without the
effect too. Just don't give them the hovertable class:
-->
<table>
<tr>
<td>This table</td>
<td>has no</td>
</tr>
<tr>
<td>hover</td>
<td>functionality</td>
</tr>
</table>
</body>
</html>
|
This may seem like a lot, but it makes for easier maintenance, since you don't have to copy/paste the onmouseover/onmouseout stuff for every cell you make 
|
