Cambiar imagen pasando ratón por encima de un botón.

Zafrac · #1 (**permalink**) 23/02/2016, 19:04

Hola,

hasta ahora he estado probando diferentes maneras de cambiar imágenes con el hover y el onmouseover, pero sólo soy capaz hasta ahora de cambiar la imagen por la cual yo paso el ratón, y mi intención es pasar el ratón por encima de un botón, y se cambie una imagen que tengo al lado, no quiero que me cambie nada de ese botón.

Me gustaría que si esto puede hacerse, alguien me encaminara o me guiara un poco, ya que soy nuevo en esto.

Gracias y un saludo!

Pantera80 · #2 (**permalink**) 25/02/2016, 14:43

Buenas!!! te lo explicaré con un ejemplo usando Javascript:

Primero, tenemos que guardar en una variable la imagen:

Código:

var imagen = document.getElementById('imagen');

Luego debemos elegir el elemento que va a disparar el evento (en este caso un botón):

Código:

<input type="button" value="Pasa el ratón por encima!"  onmouseout="cambiarImagen()" onmouseover="restaurar()" />

Y después cambiamos el 'src' de la imagen:

Código:

function cambiarImagen(){            
            imagen.src = "http://i.blogs.es/85042c/as17-148-22727/650_1200.jpg";
        }

Te dejo un ejemplo completo:

Código:

<html lang="en">
<head>
    <script type="text/javascript">
        
        function iniciar(){
            var imagen = document.getElementById('imagen'); 
        }
        function restaurar(){            
            imagen.src = "http://3.bp.blogspot.com/-MGedRBgtcQY/VWZTWWKEfGI/AAAAAAAAABQ/um8W-TDSTnw/s1600/www.BancodeImagenesGratuitas.com-Fantasticas-20.jpg";
        }
        
        function cambiarImagen(){            
            imagen.src = "http://i.blogs.es/85042c/as17-148-22727/650_1200.jpg";
        }    
    </script>
    <style type="text/css">
        img { 
            width: 40%;
            height: 200px;
        }
    </style>
</head>
<body onload="iniciar()">
  
   <input type="button" value="Pasa el ratón por encima!"  onmouseout="cambiarImagen()" onmouseover="restaurar()" />
       <div ><img id="imagen" src="http://i.blogs.es/85042c/as17-148-22727/650_1200.jpg" alt=""
           ></div>
  
    
</body>
</html>

IsaBelM · #3 (**permalink**) 25/02/2016, 17:35

Has probado con el selector de hermano adyacente?? https://developer.mozilla.org/es/doc...nos_adyacentes