Clicar em link e carregar uma div na página.

[petter 0]

Pessoal tenho alguns formulários que em determinado momento o usuário clicar em um link e vai aparecer uma div com texto informátivo.Como estou em um formulário ele pode não estar salvo e portanto não posso perde-lo. Alguém tem alguma dica de material ou o nome desse recurso para eu pesquisar pois já procurei e não encontrei nada a respeito.

[Reinaldo Ferraz 0]

Voce pode tentar um JavaScript para habilitar / desabilitar funções de CSS:<script language="JavaScript" type="text/javascript">function showDiv( id ) { document.all.questao.style.visibility = 'visible'; document.all[ id ].style.visibility = 'visible'; }function hideDiv( id ) { document.all.questao.style.visibility = 'hidden'; document.all[ id ].style.visibility = 'hidden'; }--></script>Depois, coloque o código CSS da localização do box e da instância invisivel no CSS. Todos esses parâmetros podem ser chamados pelo java script:<style type="text/css" media="all">div.questao { visibility:hidden; position:absolute; top:30px; left:0; width: 100%;}</style>E no link você coloca esse comando:<a href="#" onMouseOver="showDiv( 'questao' );" onMouseOut="hideDiv( 'questao' );">texto </a>Caso tenha problema com o <a href="#">, a tag pode ser trocada por outra, como font, span sem problemas.Que pode ser substituido por OnClick, mas ai voce terá que retirar o onMouseOut="hideDiv( 'questao' );"O que esta dentro dessa DIV vai aparecer quando clicar no link:<div id="questao" class="questao">Esse texto vai sumir e aparecer</div>Porém, por ser um JavaScript, pode ser que alguns browsers que bloqueiem esses scripts façam com que ele não apareça corretamente. É só fazendo testes mesmo. Em alguns casos, pode ser que o JavaScript não funcione com a tag <!DOCTYPE . Tente fazer uns testes.Abraços

[Guilherme Rambo 4]

Pesquise sobre "ajax", e bons estudos.

[petter 0]

Pessoal obrigado pelas dicas, mas como o negócio é para ontem, montei tudo usando CSS mesmo (para falar a verdade eu aproveitei um código que eu tinha de um menu fiz um digno POG no CSS). O problema agora é que quando eu uso a scrollbar da div pai (onde estão inseridas as outras div´s) o a div filha fica abaixo da barra de scrollbar da div pai. Já alterei o z-index da div pai e das filhas e nada do negócio funcionar, alguém pode dar um dica?O código do meu arquivo CSS:Div filha:

div#help {    padding:0px;    margin:0px;    position:absolute;    width: 1px;     list-style:none;    font: normal 10px Arial, Verdana, Serif;    color:#000000;}div#help ul{    margin:0px;    padding:0px;    position:relative;    width: 80px;    list-style:none;    font: normal 10px Arial, Verdana, Serif;    color:#000000;}div#help li{    position:relative;    margin:0px;}div#help a {    width: 20px;    display: block;    text-align:left;    padding: 3px 6px;    margin-bottom:1px;    text-decoration: none;    color: #000000;    font: normal 10px Arial, Verdana, Serif;    border: none;    voice-family: "\"}\"";    voice-family:inherit;    width:20px;    background:none;}>#pagebody>div#help a {    width:20px;}* html div#help li { float: left; height: 1%; }* html div#help li a { height: 1%; }div#help a:hover {    color: #000000;    background: none;    border-right: 1px solid none;    border-left: 1px solid none;    z-index:6;}div#help a span {    display: none;    z-index:8;}div#help a:hover span {    display: block;    position: absolute;    top:0;    left:126%;    _left: 100%;    width: 130px;    padding: 5px;    margin-left:2px;    color: #000000;    background:#FCF7E4;    font-size: 10px;    text-align:left;    border:1px dotted #F7E086;    text-align:center;    z-index:10;}

Div pai:

#formulario {    position:absolute;    width:615px;    height:294px;    z-index:1;    overflow: auto;    overflow-x: hidden;    float:none;    scrollbar-arrow-color:#FF6262;     scrollbar-base-color:#A80900;    scrollbar-shadow-color:#FE261B;     scrollbar-face-color:#FFA2A2;    scrollbar-3d-light-color:#D00000;     scrollbar-highlight-color:#FE261B;    scrollbar-darkshadow-color:#D00000;     scrollbar-track-color:#FFCECE;}

E assim eu coloco a imagem e monto para exibir o conteúdo dentro de <span> no hover do mouse:

<td><label><br />                          <input name="curso" type="text" size="60" maxlength="70" class="textfieldNoFocus" onblur="this.className='textfieldNoFocus';" onfocus="this.className='textfieldFocus';"/>                    <div id="help">                          <ul><li><a href="#"><img src="../images/interrogacao.gif" width="20" height="20" border="0"/><span><?php echo "$aca_curso"; ?></span></a></li>                        </ul>                        </div>                    </label></td>