Ir para conteúdo
Fórum Script Brasil
  • 0

Efeitos Com Mouse

Guest analu

Perguntado por Guest analu,

 Share

Pergunta

Guest analu

Guest analu

Postado
Postado

ola pessoal, bom, eu gostaria de fazer o seguinte... eu tenho duas fotos uma foto é minha ana.gif e outra da minha prima ju.gif.. eu vou colocar o meu nome e o nome dela na pagina.. então quando eu passar o mouse por cima do meu nome eu quero que apareça a minha foto.. e quando passar o mouse no dela apareça a foto dela.. e quando tirar o mouse de cima a foto não apareça mais... eu vi uma vez em um site mas não lembro qual... se puderem me ajudar ficarei muito grata...

obrigada.. tchau

Link para o comentário
Compartilhar em outros sites

9 respostass a esta questão

Posts Recomendados

  • 0
Crystian

Crystian

Postado
Postado

você não tem nenhum conhecimento em JS?

Bom vamos lá:

<html>

<head>

<script>

function mostra(evt, url){

    if(navigator.appName == 'Netscape'){ x =(evt.layerX); y=(evt.layerY);}

    else { x = (evt.x); y = (evt.y);}

    var obj = document.getElementById('title');

    if(obj != undefined){

        obj.style.visibility = 'visible';

        obj.style.top = y+10;

        obj.style.left = x+20;

        obj.innerHTML = "<img src='"+url+"' name='image'>";

    }

}

function tira(){

    var obj = document.getElementById('title');

if(obj != undefined) obj.style.visibility = 'hidden';

}

</script>

<style>

#title {

overflow: auto;

    width: 400;

    height: 300;

    position: absolute;

    visibility: hidden;

    background: #FFFF99;

    color: #000000;

    border: 1px dashed #0000FF;

    filter: alpha(opacity=50);

    -khtml-opacity: .5;

    -moz-opacity: .5;

    opacity: .5;

}

</style>

</head>

<body>

<div id="title"></div>

<a href="teste.htm" onmouseover="mostra(event, 'teste.gif');" onmouseout="tira();">teste</a>

</body>

</html>

Eu já tinha feito essa função só q ela mostrava uma mensagem, mas agora ajeitei pra mostrar uma figura...

Qualquer dúvida posta ae...

Abraço

Crystian

Link para o comentário
Compartilhar em outros sites
  • 0
Guest analu

Guest analu

Postado
Postado

Crystian, o script funcionou, mas ele só mostra a imagem se o linck estiver no topo da pagina, quando eu baixo a barra de rolagem ele não mostra ... ou seja ele mostra mas fica no topo então não se ve... gostaria que a imagem ficasse colado no linck...

valeu

Link para o comentário
Compartilhar em outros sites
  • 0
Guest analu

Guest analu

Postado
Postado

sim eu uso o IE.. olha só eu não entendo muito de java script.. mas eu dei umas mechida numa parte que alterou, talvez você consiga a parte é essa:

  obj.style.top = y+10;
        obj.style.left = x+20;
eu coloquei umas coisas assim : 
  obj.style.top = y+10;
        obj.style.left = x-20;

mas não deu o resultado que quero.. eu continuo colocNDO O linck em baixo e não aparece.. a imagem não acompanha o linck....

obrigada se não der tudo bem.. já me deu um a luz.. tchau

Link para o comentário
Compartilhar em outros sites
  • 0
Crystian

Crystian

Postado
Postado

faz o seguinte, coloca uns alert lá no x e y para saber quanto ta te retornando...

alert("Valor de X="+x+" Valor de Y="+y);
coloca o alert acima depois desse código: 
var obj = document.getElementById('title');

Depois posta o valor dos dois resultados dos valores de x e y.

Abraço

Crystian

Link para o comentário
Compartilhar em outros sites
  • 0
Guest analu

Guest analu

Postado
Postado

eu fiz o que você pediu ele esta me mostrando varios depedendo da pozição do link..

ele vareia de x=233 y=50 a x=541 y=293..

eu acho que estou entendendo o valor x e y são coodernadas, certo??

Link para o comentário
Compartilhar em outros sites
  • 0
Crystian

Crystian

Postado
Postado

isso mesmo é onde está posicionado o mouse, quanto ele tem de distância top e left. Esta function funciona assim... quando você passa o mouse sobre o link ela pega as coordenadas do onde está posicionado o mouse e mostra um div um pouco abaixo delas (por isso eu somo mais alguns pixels lá no top e left). Este div contém a tua foto para ser mostrada. Com um texto funciona direitinho e em teoria deveria funcionar... Me mostra o código q você está utilizando...

Link para o comentário
Compartilhar em outros sites
Visitante
Este tópico está impedido de receber novos posts.
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,2k
×
×
  • Criar Novo...