Abas: muda conteúdo ao passar o mouse

Olá pessoal. Navegando no site do Baixaki, logo na página inicial, tem uma área de abas (à direita), que ao passar o mouse muda o conteúdo: Programas | Jogos | Papéis

Eu analisei o script e abaixo eu coloquei o código "enxuto" do baixaki (mas que está com tabelas):

<div id="GRUPOTOP">
<table width="223" border="0" cellpadding="0" cellspacing="0"><tr>
<td width="83" height="19" valign="bottom"><img id="topimg1" src="[http://baixaki.ig.com.br//img/_v6/home/topimg1-on.gif"](http://baixaki.ig.com.br//img/_v6/home/topimg1-on.gif) width="83" height="19" onmouseover="mostratop('1');" /></td>
<td width="70" align="center" valign="bottom"><img id="topimg2" src="[http://baixaki.ig.com.br/img/_v6/home/topimg2-off.gif"](http://baixaki.ig.com.br/img/_v6/home/topimg2-off.gif) width="70" height="19" onmouseover="mostratop('2');" /></td>
<td width="72" align="center" valign="bottom"><img id="topimg3" src="[http://baixaki.ig.com.br/img/_v6/home/topimg3-off.gif"](http://baixaki.ig.com.br/img/_v6/home/topimg3-off.gif) width="70" height="19" onmouseover="mostratop('3');" /></td>
</tr>

<tr id="container">

	<td align="left" valign="top" id="top1">

	<p>Number 1<br /></p>
	<p>Number 1<br /></p>
	<p>Number 1<br /></p>
	<p>Number 1<br /></p>
	<p>Number 1<br /></p>
	<p>Number 1<br /></p>
	<p>Number 1<br /></p>

	</td>

	<td align="left" valign="top" id="top2">
	Content Two<br />
	Content Two<br />
	Content Two<br />
	Content Two<br />
	Content Two<br />
	Content Two<br />
	Content Two<br />
	Content Two<br />
	Content Two<br />
	Content Two<br />
	Content Two<br />
	</td>

	<td align="left" valign="top" id="top3">
	Conteúdo 3
	</td>

</tr>

<tr>
	<td colspan="3" valign="top">
 <b>Conteúdo vem aqui em baixo:</b>
 <div id="mostratop"></div>
	</td>
</tr>
</table>

</div>

<script language="javascript">
function mostratop(conteudo) {
document.getElementById('mostratop').innerHTML=document.getElementById('top' + conteudo).innerHTML;
document.getElementById('container').style.display='none';
document.getElementById('topimg1').src='http://baixaki.ig.com.br/img/_v6/home/topimg1-off.gif';
document.getElementById('topimg2').src='http://baixaki.ig.com.br/img/_v6/home/topimg2-off.gif';
document.getElementById('topimg3').src='http://baixaki.ig.com.br/img/_v6/home/topimg3-off.gif';
document.getElementById('topimg' + conteudo).src='http://baixaki.ig.com.br/img/_v6/home/topimg' + conteudo + '-on.gif';
}
mostratop('1');
</script>Teria como passar esse código acima para div's? 

Pra falar a verdade, eu também encontrei um script com div's no Dynamic Drive:

http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.htm

Mas esse tem 7kb só de js e o do baixaki é tão enxuto e simples, e eu não queria sobrecarregar a página.

Então alguém saberia se é possível e como fazer o código acima, atualmente em tabelas ser aplicado para <div id="y"> e <div class="x">?

Obrigado.