Untitled

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript">
function highlight(id) {
	highlightHelper(id, '#000000');	
}

function clearhighlight(id) {
	highlightHelper(id, '#FFFFFF');
}

function highlightHelper(id, color) {
	var i = parseInt(id.substring(0,1));
	var j = parseInt(id.substring(1));
	if (i - 1 > -1) {
		document.getElementById((i-1)+''+j).style.backgroundColor = color;
	}
	if (j - 1 > -1) {
		document.getElementById(i+''+(j-1)).style.backgroundColor = color;
	}
	document.getElementById((i+1)+''+j).style.backgroundColor = color;
	document.getElementById(i+''+(j+1)).style.backgroundColor = color;
}
</script>
</head>
<body>
<table border="1">
<tr>
<td id="00" onmouseover="highlight('00')" onmouseout="clearhighlight('00')">00</td>
<td id="01" onmouseover="highlight('01')" onmouseout="clearhighlight('01')">01</td>
<td id="02" onmouseover="highlight('02')" onmouseout="clearhighlight('02')">02</td>
<td id="03" onmouseover="highlight('03')" onmouseout="clearhighlight('03')">03</td>
<td id="04" onmouseover="highlight('04')" onmouseout="clearhighlight('04')">04</td>

<td id="05" onmouseover="highlight('05')" onmouseout="clearhighlight('05')">05</td>
</tr><tr>
<td id="10" onmouseover="highlight('10')" onmouseout="clearhighlight('10')">10</td>
<td id="11" onmouseover="highlight('11')" onmouseout="clearhighlight('11')">11</td>
<td id="12" onmouseover="highlight('12')" onmouseout="clearhighlight('12')">12</td>
<td id="13" onmouseover="highlight('13')" onmouseout="clearhighlight('13')">13</td>
<td id="14" onmouseover="highlight('14')" onmouseout="clearhighlight('14')">14</td>
<td id="15" onmouseover="highlight('15')" onmouseout="clearhighlight('15')">15</td>
</tr><tr>
<td id="20" onmouseover="highlight('20')" onmouseout="clearhighlight('20')">20</td>

<td id="21" onmouseover="highlight('21')" onmouseout="clearhighlight('21')">21</td>
<td id="22" onmouseover="highlight('22')" onmouseout="clearhighlight('22')">22</td>
<td id="23" onmouseover="highlight('23')" onmouseout="clearhighlight('23')">23</td>
<td id="24" onmouseover="highlight('24')" onmouseout="clearhighlight('24')">24</td>
<td id="25" onmouseover="highlight('25')" onmouseout="clearhighlight('25')">25</td>
</tr><tr>
<td id="30" onmouseover="highlight('30')" onmouseout="clearhighlight('30')">30</td>
<td id="31" onmouseover="highlight('31')" onmouseout="clearhighlight('31')">31</td>
<td id="32" onmouseover="highlight('32')" onmouseout="clearhighlight('32')">32</td>

<td id="33" onmouseover="highlight('33')" onmouseout="clearhighlight('33')">33</td>
<td id="34" onmouseover="highlight('34')" onmouseout="clearhighlight('34')">34</td>
<td id="35" onmouseover="highlight('35')" onmouseout="clearhighlight('35')">35</td>
</tr><tr>
<td id="40" onmouseover="highlight('40')" onmouseout="clearhighlight('40')">40</td>
<td id="41" onmouseover="highlight('41')" onmouseout="clearhighlight('41')">41</td>
<td id="42" onmouseover="highlight('42')" onmouseout="clearhighlight('42')">42</td>
<td id="43" onmouseover="highlight('43')" onmouseout="clearhighlight('43')">43</td>
<td id="44" onmouseover="highlight('44')" onmouseout="clearhighlight('44')">44</td>

<td id="45" onmouseover="highlight('45')" onmouseout="clearhighlight('45')">45</td>
</tr><tr>
<td id="50" onmouseover="highlight('50')" onmouseout="clearhighlight('50')">50</td>
<td id="51" onmouseover="highlight('51')" onmouseout="clearhighlight('51')">51</td>
<td id="52" onmouseover="highlight('52')" onmouseout="clearhighlight('52')">52</td>
<td id="53" onmouseover="highlight('53')" onmouseout="clearhighlight('53')">53</td>
<td id="54" onmouseover="highlight('54')" onmouseout="clearhighlight('54')">54</td>
<td id="55" onmouseover="highlight('55')" onmouseout="clearhighlight('55')">55</td>
</tr></table></body></html>