Abrir texto em uma janelinha amarela

[wilson 0]

Olá Pessoal

 

preciso fazer um negócio assim, tipo:

 

tenho um texto :

 

xxxxxxxxxxxxxx sfdasfsaf safsafqwrewqer

 

dae quando o cara clica em cima desse texto sublinhado, abre uma janelinha amarela com um texto explicativo sobre essa palavra amarela.

 

Ja procurei em varios códigos e não estou encontrando

 

Se alguem puder me ajudar, eu agradeceria.

 

Abraços

 

Wilson

[wilson 0]

É!Pode ser, mas existe algum tutorial ou exemplo disso?AbçWilson

[wilson 0]

Já fiz isso, mto obrigado amigo. Estou estudando o código, mas num tá facil... hehe. Ta dando erro nos JS.Qdo eu conseguir fazer funcionar, postarei novamente aqui...abç

[Alex Hiroshi 7]

Olha, não vi o outro tópico citado... mas não é dificil... é só você pegar a posição do mouse na tela, com event.clientX e event.clientY, e posicionar uma div com o que os events te retornar..

exemplo basico que fiz agora.. é só você adaptar um "esconde div" :P

<div id="amarelo" style="visibility: hidden; position: absolute; width: 100px; height:100px; background: yellow; border: 1px solid black;">
Oii
</div>

texto textotexto textotexto texto <a href="#" onclick="document.getElementById('amarelo').style.top=event.clientY; document.getElementById('amarelo').style.left=event.clientX; document.getElementById('amarelo').style.visibility='visible';" > oioi </a> texto textotexto texto <br /> texto textotexto textotexto texto <br />
texto textotexto texto

só uma opinião minha, eu usaria um onmousemove, assim quando o usuario passar o mouse em cima da palavra... a caixinha aparece... ai não precisa ser clicado.. mais isso fica ao seu gosto.. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[wilson 0]

Obrigado, amigo.era isso mesmo q eu queria, mas tem como fazer com que, se o cara clicar em outro lugar qualquer, fecha a janelinha?só se você souber, senao, nem se estressa, já me ajudou um montão.Abraço

[Alex Hiroshi 7]

pq não usa um onmouseout="document.getElementById('amarelo').style.visibility='hidden';"no link... fica melhor... quanto ao clicar em outro lugar.. fiquei na duvida em fazer algo aqui... teste ae o que eu falei..

<div id="amarelo" style="visibility: hidden; position: absolute; width: 100px; height:100px; background: yellow; border: 1px solid black;">Oii</div>texto textotexto textotexto texto <a href="#" onmouseout="document.getElementById('amarelo').style.visibility='hidden';" onclick="document.getElementById('amarelo').style.top=event.clientY; document.getElementById('amarelo').style.left=event.clientX; document.getElementById('amarelo').style.visibility='visible';" > oioi </a> texto textotexto texto <br /> texto textotexto textotexto texto <br />texto textotexto texto

[wilson 0]

Valeu cara...Eu encontrei ontem de noite fuçando... já ia postar aqui...PS.: usei o OnMouseOver, como você havia sugerido...tá ótimo... agradeço sua ajuda... vou postar o código final aqui para dirimir as próximas dúvidasabraçãoobrigadowilsonwww.wilsonsavegnago.tk

[wilson 0]

Prontoagora, o código ficou assim:

onMouseOver="document.getElementById('amarelo').style.top=event.clientY; document.getElementById('amarelo').style.left=event.clientX; document.getElementById('amarelo').style.visibility='visible';" onmouseout="document.getElementById('amarelo').style.visibility='hidden';"> texto </a>...<div id="amarelo" style="visibility: hidden; position: absolute; width: 200px; height:200px; background: #FFFF99; border: 1px solid black; left: 522px; top: 508px;">texto que vai dentro da caixinha amarela</div>

o resto é igualFicou ótimo.Agradeço a atençãowww.wilsonsavegnago.tk