(Resolvido) Aparecer uma caixa de diálogo ao passar o mouse

[Pedro H. Martins]

Galera, estou precisando desse "efeito" de forma básica e leve,

mas não aquela caixa de diálogo padrão!

Quero que quando passar o mouse sobre a imagem abra uma caixa

com visual diferenciado daquele do padrão, com um pequeno texto

em fonte pequenina também!

E de preferência, que essa caixa siga o mouse quando a pessoa mexer com ele ainda em cima da imagem!

Alguém pode me passar esse script em CSS?!!!

vlws até mais!

[SK15]

Isso não existe em CSS mas em JavaScript + CSS rola, veja se esse te agrada ...

http://www.gerd-tentler.de/tools/tooltip/index.php

Qualquer coisa procura no Google por: tooltip

Editado Agosto 20, 2009 por SK15

[Jonathan Queiroz]

Você também pode utilizar o atributo title (ou alt, para imagens)

Mesmo que faça com tooltip recomendo que utilize o title/alt também para dar mais acessibilidade e isso também ajuda nos buscadores.

<div title="Mensagem de boas-vindas">Olá</div>

<img src="aaa.jpg" alt="descrição da imagem" />

[Matheus Matos]

opa, cara dá pra fazer com css+javascript, basta dizer ao javascript que quando o mouse do usário estiver encima da imagem ele mostrar uma div! bem, o código ficaria assim:

<img src="http://localdaimagem.gif" onmouseover="getElementById('descricao').style.display='block'" onmouseout="getElementById('descricao').style.display='none'" />

<div id="descricao" style="position:relative; height:100px; width:100px; background:#FF0000; top:15px;left:40px">Descrição da Imagem, isso é uma div e você pode colocar o que quise aqui!</div>

bem, disse no código, mas vou repetir, a legenda é uma div, você pode colocar o que bem entender nela, imagem, vídeo, banner em flash, texto, você pode mudar a cor ou colocar uma imagem de fundo, alterar o estilo dela, largura altura, margen do topo, margem da esquerda, padding, enfim infinitas coisas!

Espero ter te ajudado!

Vlw

Matheus Matos

Editado Agosto 20, 2009 por Matheus Matos

[Pedro H. Martins]

SK15

vlw... funcionou perfeitamente!

http://www.gerd-tentler.de/tools/tooltip/index.php#

Matheus, esse jeito que você falou, quando abre a página a DIV já estaá aparecendo..

ai eu tenho que passar o mouse, e tirar pra ela desaparecer!

De qualquer forma vlw!

Dúvida sanada!

[Jonathan Queiroz]

Recomendo que, por questões de acessibilidade e otimização para buscadores, utilize também os atributos HTML que foram criados para isso, mesmo que utilize outro método complementar.

Obs.:

O tópico foi marcado como Resolvido

[Matheus Matos]

pow Pedro! :o bastava colocar um display:none no css da div descricao! assim:

<img src="http://scriptbrasil.com.br/forum/style_images/sb_images/logo4.jpg" onmouseover="getElementById('descricao').style.display='block'" onmouseout="getElementById('descricao').style.display='none'" />
<div id="descricao" style="position:relative; height:100px; width:100px; background:#FF0000; top:15px;left:40px; display:none; " >Descrição da Imagem, isso é uma div e você pode colocar o que quiser aqui!</div>

mas já que você preferiu usar o link do SK15... <_<

hehe... ei veii é bricadeira viu! Tanto pro Pedro como pro SK15! :lol:

até porque o link que o sk15 é massa!

---------------------------------------------------

hahahahaha :lol: kd o jhonatan hein? Ele disse aqui em cima que o tópico tava marcado como Resolvido e esqueceu de marcar! ^_^ --> Marca aqui jonathan! :P

Vlw galera!

Matheus Matos

Editado Agosto 25, 2009 por Matheus Matos

[Pedro H. Martins]

hehehe!

sim sim... é que o que ele me passou é mais decorado!

Fico show aqui!

mas vlw mesmo pela dica =D

vou marcar como resolvido!

thanks!

[roberto_sm822]

Muito boa referencia!

Solucionou mesmo o meu problema com a falta de uma caixa de mensagem sobre uma breve

descrição do que está disponível naquele link antes do navegante entrar.

Eu a principio após baixar o código do Tooltip (http://www.gerd-tentler.de/tools/tooltip/index.php?page=download), fiz um exemplo rápido e cheguei a ter um problema frustrante com a exibição da mensagem que ficava aparecendo fora do foco da imagem com link. Para solucionar este drama, investiguei através de teste erro o código fonte que vem no donwload zipado, em especial o arquivo: "tooltip.js" e na linha 66 reparei que era só trocar de "right" para "left" que a caixa tooltip passa a acompanhar o cursor do mouse.

A ajuda foi muito boa e agora contribuo com observarções adicionais! ^_^