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

[R3ALSTR!P]

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

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 Dezembro 17, 2009 por R3ALSTR!P

[fercosmig]

utilize os eventos onmouseover e onmouseout

exemplo:

<img src="001.jpg" onMouseOver="this.src = '004.jpg';" onMouseOut="this.src = '001.jpg';"/>

[R3ALSTR!P]

Eu digo... quando bota o cursor somente na imagem 1 ela se substitui e ao mesmo tempo a imagem 2 se substitui também e não um separado do outro. Teria como fazer um código de exemplo disso? iria facilitar muito para mim.

Desde já, obrigado.

:blush:

[fercosmig]

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');"/>

[R3ALSTR!P]

Grande fercosmig!

Vou tentar fazer, qualquer coisa vou postar aqui.

Obrigado, valeu!

:D

Editado Dezembro 17, 2009 por R3ALSTR!P

[FlavioRS]

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');"/>

Muito boa a dica testada e aprovada.

[R3ALSTR!P]

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 Dezembro 19, 2009 por R3ALSTR!P

[Vinicci]

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!

[R3ALSTR!P]

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!

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: ???