Ir ao conteúdo
  • Cadastre-se

Foto ao passar Mouse


deleted893662

Posts recomendados

Oi Pessoal,

É o seguinte, estou fazendo um fan-site de um jogo com alguns amigos, e como todo fan-site, estamos fazendo guias de missões, habilidades, entre outros. Como o jogo acabou de ser traduzido para o português existem alguns itens que as pessoas só reconhecem pela foto, e não pelo nome, então tivemos a ideia de fazer com que aparece a imagem ao passar o mouse em cima do texto.

Exemplo:

Tem um Iten chamado Vara de Pescar, quando se coloca o mouse em cima deste nome, é mostrado uma caixinha mostrando a foto da Vara de Pesca.

Eu consegui com a tag OnMouseOver fazer o contrário, fazer aparecer um texto ao passar o mouse na imagen:

<a class=linkanchor

onmouseover="showhint('<a> <img src=vara_de_pecar.png/> </a>, this, event, '150px')"

href="#">Faca </A>

Mas, porcausa dos caracteres ' e " que já estão sendo usados, não posso fazer o contrário...

Será que poderiam me ajudar?

___________

Desculpem se postei na área errada, sou novo aqui e está foi a sessão que achei mais adequada. :mellow:

Agradeço desde já

EDIT: O que quero é como nesses programas de afiliados, onde no meio do texto, aparecem aquelas palavras "linkadas" que quando alguem coloca o mouse em cima aparece uma janelinha com a imagem do anuncio.

Obs: Não quero que abra uma nova página, só tipo uma caixa de texto com a foto. ;)

EDIT2: Acabei de Reparar, aqui neste fórum tem esse uma Div chamada HOTWordsTxt, é isso que preciso, quando coloca o mouse em cima, aparece a imagem da propaganda, no meu caso a foto. Será que alguem pode me passar o Code?

Link para o comentário
Compartilhar em outros sites

  • Moderador

acho q para resolver seu problema.. você usa uma div com display none, e habilita ela no momento que pairar o mouse por cima .. você ta usando certo com o onmouseover.

mas você pode criar um js separado e fazer um bloco de if-else ...

eu faria assim..também de uma pesquisada nessa possibilidade de usar o jquery pra fazer o que quer acho q simplifica mais ainda.

isto pode dar uma luz a você com jquery:

http://codigofonte.uol.com.br/codigo/js-dhtml/jquery/criando-efeito-de-mouseover-e-mouseout-no-jquery

abraço

Link para o comentário
Compartilhar em outros sites

EDIT: Se puder dar uma olhada, e ver se tem como fazer sem as DIV's, para quando aparecer a imagem, a linha não sair quebrada... valeu!

:lol:

Tentei de outro jeito, refiz o code, e deu certo. Abaixo como fiz.

No Head

<script>

function aparece(){

document.getElementById("001").style.display="block";

}

function some(){

document.getElementById("001").style.display="none";

}

</script>

No Body

<p>Requerimentos: <a onmouseover="aparece();" onmouseout="some();"> Vara de Pesca</a> </p>

<div id="001" style="display: none">

<img src="images/itens/v/vara_de_pesca.png" />

</div>

Valeu ai cara!

Gostei pra caramba do Fórum!

Té mais!!

Link para o comentário
Compartilhar em outros sites

  • 8 meses depois...
  • Moderador
desculpa ae é que tudo agora parece ser japones

ai entendo pouca coisa

então sugiro que nao tente usar ele... pois deixe para usar depois que aprender.. leia sobre javascript. em www.apostilando.com tem varias apostilas boas sobre javascript.

EDIT: Se puder dar uma olhada, e ver se tem como fazer sem as DIV's, para quando aparecer a imagem, a linha não sair quebrada... valeu!

:lol:

Tentei de outro jeito, refiz o code, e deu certo. Abaixo como fiz.

No Head

No Body

Valeu ai cara!

Gostei pra caramba do Fórum!

Té mais!!

Amigo, o unico ponto ruim desse seu codigo.. é que você tera que fazer isso com todas as imagens que você quer.

Link para o comentário
Compartilhar em outros sites

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...