Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Entre para seguir isso  
Lazuks

Foto ao passar Mouse

Recommended Posts

Lazuks    0

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?

Editado por Lazuks
Adicionar detalhe

Compartilhar este post


Link para o post
Compartilhar em outros sites
DiF    2.701

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

Compartilhar este post


Link para o post
Compartilhar em outros sites
Lazuks    0
  • Autor do tópico
  • Desculpa, eu cliquei em CITAR e criou uma nova postagem sem eu ver. desculpa.

    Tem como eu deletar? é a segunda vez já. affs.

    Pode olhar ai a hora das duas postagens, não foi pra dar bump, foi sem querer mesmo. =/

    Ainda não acostumei com este fórum...

    Editado por Lazuks

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
    Lazuks    0
  • Autor do tópico
  • ("<div style=\"background-color: green;\">Mouse está em cima!</div>");

    Nesta parte, a barra está ai pra não haver conflito entre os dois pares de aspas?

    Se for isso, acho que dá pra configurar o meu código a aceitar, e abrir com a imagem.. vou testar. ^_^

    Obrigado!

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
    DiF    2.701
    Nesta parte, a barra está ai pra não haver conflito entre os dois pares de aspas?

    Se for isso, acho que dá pra configurar o meu código a aceitar, e abrir com a imagem.. vou testar. ^_^

    Obrigado!

    as contra-barras estão certas... teoricamente deveria funcionar

    Editado por dif

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
    Lazuks    0
  • Autor do tópico
  • 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!!

    Editado por Lazuks

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
    borghi100    0

    gente sou muito iniciante nisso tem duas semanas que comecei a mexer e quero exatamente esse codigo ae mais não consigo usar alguem pode explicar mais detalhado pra mim

    agradeceria muito....

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
    DiF    2.701

    nao ha muita necessidade de explicaçoes... ele ja é auto explicativo... você tem ali 2 funçoes em javascript.. uma para mostrar e outra para esconder... você chama as funções na onde você quiser que elas funcionem...

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
    DiF    2.701
    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.

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    Crie uma conta ou entre para comentar

    Você precisar ser um membro para fazer um comentário

    Entre para seguir isso  





    Sobre o Clube do Hardware

    No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações 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

    ×