You are going to learn how to make a table like this.
First off let’s make the styles – put this in your <head> tag. You should customise this so that it fits in with your site. The crucial parts are the background-colors.
Styles
<style media=”all” type=”text/css”>
body, html {
font-family: Tahoma, sans-serif;
font-size: 11px;
color: #EEEEEE;
background-color: #2A2A2A;
}
td {
width: 50px;
border: 1px solid #999999;
cursor: pointer;
text-align: center;
}
.row {
background-color: #444444;
}
.rowhighlight {
background-color: #666666;
font-weight: bold;
}
</style>
Now the bit that handles the rollovers – put this in your <head> tag also. Set the tablewidth and tableheaight variables so that they correspond to the numbre of cells in your table. We take the id of a cell and use this to work out the position of the mouse. An example of an id is 2×4. This equates to two rows across and four rows down. By split()ing this information we have an x and y co-ordinate. We then use this data along with the width and height of the table to switch the CSS classes of the cell:
Scripts
<script language=”javascript” type=”text/javascript”>
var tablewidth = 4;
var tableheight = 4;
function cellevent( id, isover ) {
var arr = id.split( ‘x’ );
var x = arr[ 0 ];
var y = arr[ 1 ];
if( isover ) {
var classnm = ‘rowhighlight’;
}
else {
var classnm = ‘row’;
}
for( var counter = 1; counter <= tablewidth; counter ++ ) {
document.getElementById( x + ‘x’ + counter ).className = classnm;
}
for( var counter = 1; counter <= tableheight; counter ++ ) {
document.getElementById( counter + ‘x’ + y ).className = classnm;
}
}
</script>
Now for the actual table. We put the same code for onmouseover and onmouseout in each cell. Make sure the id are set correctly:
Table Code
<table>
<tr>
<td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”1×1″>1</td>
<td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”1×2″>2</td>
<td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”1×3″>3</td>
<td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”1×4″>4</td>
</tr>
<tr>
<td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”2×1″>5</td>
<td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”2×2″>6</td>
<td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”2×3″>7</td>
<td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”2×4″>8</td>
</tr>
<tr>
<td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”3×1″>9</td>
<td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”3×2″>10</td>
<td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”3×3″>11</td>
<td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”3×4″>12</td>
</tr>
<tr>
<td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”4×1″>13</td>
<td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”4×2″>14</td>
<td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”4×3″>15</td>
<td onmouseover=”cellevent( this.id, true );” onmouseout=”cellevent( this.id, false );” class=”row” id=”4×4″>16</td>
</tr>
</table>
And that’s it!