Abas: muda conteúdo ao passar o mouse

[newboxters 0]

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" 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" 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" 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.

[William Bruno 1501]

Sim, basta você construir essa estrutura em DIVs. Nem precisa alterar nada do js. Mas mantenha as mesmas IDs.

[newboxters 0]

Editado:

Ok, tem razão, agora funcionou. Eu tinha esquecido de fechar um div.

Só mais uma coisa, na img das abas (ao passar o mouse) eles mudam a img, só que assim, em internets mais lentas, pode demorar um pouco pra carregar a img de efeito hover. Eu no CSS, sempre utilizo uma única img e ao passar o mouse muda somente a position dessa img, assim já está carregado o efeito hover. Como eu posso mudar isso e fazer o javascript realizar essa alteração? Pq se deixar só no css, ele muda a aba só ao passar o mouse, mas mesmo estando o conteúdo, se tirar o mouse, some o efeito da aba "hover".

 

Obrigado.

 

Agora uma dúvida, mais curiosidade que eu tenho, há algum peso ideal de página, ou melhor, de quantidade de javascripts que se pode inserir numa página? Pq tem sites que carregam uns 400 kb ou mais só de js. Eu atualmente uso uns 80kb. Até quanto é aconselhável, pois apesar de ter crescido o uso de banda larga, ainda há muita gente que usa acesso discado (download a 4kb).

 

Editado²:

Uma coisa que eu costumo fazer, é de os javascripts mais importantes, são carregados no topo, como que dependem de navegação da página, ajax. Já outros javascripts apenas de "efeitos" e coisas semelhantes, q não interferem tanto na apresentação da página, então eu deixo pra carregar somente no final do site, assim o usuário já pode navegar na página e enquanto isso vai carregando o resto dos javascripts. Isso é uma boa estratégia e possibilita utilizar uma quantidade maior de javascript na página?

[Lúcio Gomes 0]

Desculpe a sinceridade, mas esse código tá bem ruizinho. Oculta tudo e depois abre um outro div só pra exibir o conteúdo de volta, na minha opinião isso pode ser descartado, pois se tiver 3 blocos de div (top1, top2, top3) basta ocultar os divs top2 e top3 e exibir o top1 e ao passar o mouse (identifica com o onmouseover - do javascript) e passa a exibir o conteúdo dessa div que está passando o mouse e ocultar as demais.

 

E pra fazer o efeito hover do CSS como você mencionou, também

document.getElementById('id_das_abas').style.background='url_img position';

 

Pra fechar, excelente esquema dos javascripts, isso é uma solução profissional, afinal, javascripts que não interferem na navegação da página podem ser carregados somente após carregar todo site, assim acelera a navegação e o ganho é excelente mesmo, agora utilizar 400 KB de javascript também é exagero.