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

Ao botar o cursor em sima da imagem substitui ela e outra


R3ALSTR!P

Pergunta

Como sei muito pouco de JavaScript eu preciso de uma ajudinha.

imagemrx.png

Estou fazendo um site eu gostaria de saber como fazer para quando a pessoa botar o cursor somente em sima da imagem 1 ela se substitui por outra e a imagem 2 também se substitui por outra e vice-versa, quando botar o cursor somente em sima da imagem 2 ela se substitui por outra e a imagem 1 também se substitui por outra. Obs: ao tirar o cursor, a imagem volta à original.

ATENÇÃO: Não precisa ser necessariamente JavaScrip, desde que faça isso.

Desde já, obrigado.

;)

Editado por R3ALSTR!P
Link para o comentário
Compartilhar em outros sites

8 respostass a esta questão

Posts Recomendados

  • 0

um exemplo ae:

<script language="javascript" type="text/javascript">
<!--
aux = 0;
function mudar(obj1, idobj2){
    obj2 = document.getElementById(idobj2);
    if (aux == 0){
        obj1.src = '004.jpg';
        obj2.src = '001.jpg';
        aux++;
    }else{
        obj1.src = '001.jpg';
        obj2.src = '004.jpg';
        aux--;
    }    
}
-->
</script>
<img src="001.jpg" id="a" onMouseOver="mudar(this,'b');" onMouseOut="mudar(this,'b');"/>
<img src="004.jpg" id="b" onMouseOver="mudar(this,'a');" onMouseOut="mudar(this,'a');"/>

Link para o comentário
Compartilhar em outros sites

  • 0
um exemplo ae:

&lt;script language="javascript" type="text/javascript">
<!--
aux = 0;
function mudar(obj1, idobj2){
    obj2 = document.getElementById(idobj2);
    if (aux == 0){
        obj1.src = '004.jpg';
        obj2.src = '001.jpg';
        aux++;
    }else{
        obj1.src = '001.jpg';
        obj2.src = '004.jpg';
        aux--;
    }    
}
-->
</script>
<img src="001.jpg" id="a" onMouseOver="mudar(this,'b');" onMouseOut="mudar(this,'b');"/>
<img src="004.jpg" id="b" onMouseOver="mudar(this,'a');" onMouseOut="mudar(this,'a');"/>

Muito boa a dica testada e aprovada.

Link para o comentário
Compartilhar em outros sites

  • 0

O script funcionou perfeitamente mas não era o que eu queria. O que acontece?

- As imagens 1 e 2 trocam de lugar uma com a outra, ou seja, existem 2 imagens.

Vou explicar de outra maneira o que eu quero que aconteça:

- Exitem 4 imagens. Quando bota o cursor SOMENTE na imagem 1 ela se substitui pela imagem 3 e ao mesmo tempo [com o cursor ainda na imagem 1] a imagem 2 vai se substituir pela imagem 4. Também quero que o mesmo ocorra quando o cursor estiver SOMENTE na imagem 2.

Desde já, obrigado.

:blush:

Editado por R3ALSTR!P
Link para o comentário
Compartilhar em outros sites

  • 0

Creio que o código do fercosmig possa resolver o seu provlema.

Você só precisa adaptá-lo para mudar as imagens que você quer.

Seria mais ou menos assim:

<script language="javascript" type="text/javascript">
<!--
aux = 0;
function mudar(obj1, idobj2){
    obj2 = document.getElementById(idobj2);
    if (aux == 0){
       /*seta o estado inicial das imagens, ou seja, sem focus
        obj1.src = '004.jpg';
        obj2.src = '001.jpg';
        aux++;
    }else{
       /*troca as imagens quando o mouse estiver sobre as imagens (ou elemento que contém as mesmas)
        obj1.src = '003.jpg';
        obj2.src = '004.jpg';
        aux--;
    }    
}
-->
</script>

Copreendes?

espero ter ajudado.... flws!

Link para o comentário
Compartilhar em outros sites

  • 0
Creio que o código do fercosmig possa resolver o seu provlema.

Você só precisa adaptá-lo para mudar as imagens que você quer.

Seria mais ou menos assim:

&lt;script language="javascript" type="text/javascript">
<!--
aux = 0;
function mudar(obj1, idobj2){
    obj2 = document.getElementById(idobj2);
    if (aux == 0){
       /*seta o estado inicial das imagens, ou seja, sem focus
        obj1.src = '004.jpg';
        obj2.src = '001.jpg';
        aux++;
    }else{
       /*troca as imagens quando o mouse estiver sobre as imagens (ou elemento que contém as mesmas)
        obj1.src = '003.jpg';
        obj2.src = '004.jpg';
        aux--;
    }    
}
-->
</script>
Copreendes? espero ter ajudado.... flws!
Pois é, tinha pensado desta maneira antes... mas não funcionou muito bem. Eu fiz assim:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Praticando</title>
<link href="style.css" rel="stylesheet" type="text/css" />
&lt;script language="javascript" type="text/javascript">
<!--
aux = 0;
function mudar(obj1, idobj2){
    obj2 = document.getElementById(idobj2);
    if (aux == 0){
        obj1.src = '004.jpg';
        obj2.src = '001.jpg';
        aux++;
    }else{
        obj1.src = '002.jpg';
        obj2.src = '003.jpg';
        aux--;
    }    
}
-->
</script>
</head>

<body>
<img src="001.jpg" id="a" onMouseOver="mudar(this,'b');" onMouseOut="mudar(this,'b');"/>
<img src="004.jpg" id="b" onMouseOver="mudar(this,'a');" onMouseOut="mudar(this,'a');"/>
</body>
</html>
Mas ficou tudo bugado, será que eu devo mexer aqui?
<img src="001.jpg" id="a" onMouseOver="mudar(this,'b');" onMouseOut="mudar(this,'b');"/>
<img src="004.jpg" id="b" onMouseOver="mudar(this,'a');" onMouseOut="mudar(this,'a');"/>

:unsure: ???

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...