innerHTML

faz muito tempo que não posto aqui. depois que saí da área de programação praticamente nunca mais mexi com isso. OAIOHOhoho

o lance é que pintou uma bobeirinha pra fazer aqui e agora to penando :P

um camarada meu pediu pra eu fazer um site simples para ele e eu inicialmente criei um HTML +- assim:

<table><tr><td width=777 height=180>banner do site</td></tr><tr> <td> <table> <tr> <td width=150> <a href="#">conteúdo 1</a> <a href="#">conteúdo 2</a> <a href="#">conteúdo 3</a> </td> <td></td> </tr> </table> </td></tr></table>

o exemplo acima está BEEEM simplificado. é apenas uma amostra do formato da página.

o fato é que a primeira TD da segunda tabela é um menu lateral com diversas opções e a idéia é que ele carregue o conteúdo de cada opção do lado direito, na segunda TD.

aí eu caí no meu problema. para fazer este carregamento do lado direito, pensando em programação BEM simples, eu teria que refazer a coisa toda com frames, onde cada "divisão" da página seria um frame.

resolvi tentar isso, visto que era bem simples. porém surgiu outro problema. o meu menu do lado esquerdo é muito "comprido", o que faz com que tenha que rolar a página. isso com frames fica uma porcaria, já que não quero que apareça uma barra de rolagem no frame do menu.

fiquei um bom tempo tentando resolver isso de uma maneira mais simples e não consegui pensar em nada e aí lembrei de um site que eu tinha feito a muito tempo atrás onde eu trocava a imagem de uma TD que ficava em OUTRO frame através de javascript usando um ID dentro da tag da imagem.

pesquisei sobre isso mas para trocar todo o conteúdo da TD, e não uma imagem apenas. aí que eu fiquei sabendo do innerHTML, porém não conheço muito sobre ele, e na pouca informação que eu consegui descobrir eu notei que eu teria que "programar" todo o conteúdo dentro da tag do link.

exemplificando a coisa toda aí acima temos o seguinte.

<table><tr><td width=777 height=180>banner do site</td></tr><tr> <td> <table> <tr> <td width=150> <a href="#" onclick="javascript:document.getElementById('conteudo').innerHTML="Novo conteúdo 1";">conteúdo 1</a> <a href="#" onclick="javascript:document.getElementById('conteudo').innerHTML="Novo conteúdo 2";">conteúdo 2</a> <a href="#" onclick="javascript:document.getElementById('conteudo').innerHTML="Novo conteúdo 3";">conteúdo 3</a> </td> <td id="conteudo">Conteúdo atual.</td> </tr> </table> </td></tr></table>

a pergunta final é: eu consigo colocar todo esse "novo conteúdo" em um arquivo externo que possa ser lido pelo innerHTML?

aí eu faria algo do tipo:

conteudo1.htm

conteudo2.htm

conteudo3.htm

que seriam carregados dentro da TD com o ID conteudo quando o link fosse clicado.

quero com isso programar apenas uma "home" e os arquivos de conteúdos ficarem separados para facilitar a manutenção disso, visto que o meu amigo não manja uma virgula de qualquer tipo de programação e ele que fará a manutenção do site dele.

quando ele quiser alterar algum conteúdo ele vai direto no HTM do conteúdo a ser alterado e não corre o risco de ferrar com o site todo.

putz.. escrevi pra caramba. se puderem me ajudar com alguma idéia ficarei muito agradecido.

[]'s