マウスが重なったらテーブルのセルの色を変える

リンク１ リンク２ リンク３ 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>マウスが重なったらテーブルのセルの色を変える</title>
<style type="text/css">
<!--
a{text-decoration:none;}
td a:hover {font-style:italic;}
-->
</style>
<script type="text/javascript">
<!--
//元のセル背景色
var bgCell1 = "#ffffff";
//マウスが重なったときのセル背景色
var bgCell2 = "#ccccff";

function mouseOver(obj){
    obj.style.backgroundColor = bgCell2;
}
function mouseOut(obj){
    obj.style.backgroundColor = bgCell1;
}
function clkC(str){
	str = str.match(/href=\"(.+)\"/i);
	location.href=str[1];
}
//-->
</script>
</head>
<body>
<table border="1" cellpadding=20>
<tr>
<td onMouseOver="mouseOver(this)" 
  onMouseOut="mouseOut(this)" onClick="clkC(this.innerHTML)">
<a href="https://www.7key.jp/">リンク１</a>
</td>
<td onMouseOver="mouseOver(this)"
  onMouseOut="mouseOut(this)" onClick="clkC(this.innerHTML)">
<a href="https://www.7key.jp/hp/">リンク２</a>
</td>
<td onMouseOver="mouseOver(this)"
  onMouseOut="mouseOut(this)" onClick="clkC(this.innerHTML)">
<a href="http://plaza.rakuten.co.jp/hacdic/">リンク３</a>
</td>
</tr>
</table>
</body>
</html>