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.
Discussão (3)
Carregando comentários...