Cambiar imagen al pasar el mouse en JavaScript
-
Use los atributos HTML
onmouseoveryonmouseoutpara activar funciones -
Use el método
.hover()para cambiar la imagen al pasar el mouse
En JavaScript, hacemos un seguimiento de algún bloque de código o método específico para realizar la tarea de cambiar una imagen al pasar el mouse por encima. Más bien, la forma eficiente es crear una función definida por el usuario que tenga en cuenta la fuente de la imagen y coopere con los efectos de desplazamiento del mouse.
Nuestros conjuntos de ejemplo verán una demostración con los atributos HTML onmouseout y onmouseover para activar ciertas funciones en el segmento de secuencia de comandos. Además, en segunda instancia, tendremos una función .hover() asociada al jQuery.
Revisemos el código base para tener un concepto claro.
Use los atributos HTML onmouseover y onmouseout para activar funciones
El principio básico de funcionamiento se basa en onmouseover y onmouseout. Y estos atributos se asignan a la función que tiene su descripción para cambiar las imágenes al pasar el mouse.
Necesitaremos un jQuery CDN para operar la función, ya que depende de jQuery con .attr().
Fragmento de código:
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="menu" >
<a href="#" id="home">
<img id='menuImg' src="https://images.unsplash.com/photo-1653398597364-c63c01f261cc?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974" alt="logo" width="200px" height="150px"
onmouseover="onHover();" onmouseout="offHover();" />
</a>
</div>
function onHover() {
$('#menuImg')
.attr(
'src',
'https://images.unsplash.com/photo-1653398597887-5005619e8cdc?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774');
}
function offHover() {
$('#menuImg')
.attr(
'src',
'https://images.unsplash.com/photo-1653398597364-c63c01f261cc?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974');
}
Producción:
Use el método .hover() para cambiar la imagen al pasar el mouse
Este ejemplo muestra la forma en que jQuery trata con la clase img home. Tendremos la clase inicializada para nuestra fuente de imagen, y luego generaremos la función según sea necesario.
La diferencia con el anterior es que aquí no usamos ningún atributo HTML. Más bien, confiamos en el método .hover(), que funciona claramente.
Saltemos al código.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<div>
<img height="150px" width="200px" src="https://images.unsplash.com/photo-1653398597887-5005619e8cdc?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774" alt="" class="home">
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".home").hover(
function() {$(this).attr("src","https://images.unsplash.com/photo-1653398597364-c63c01f261cc?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774");},
function() {$(this).attr("src","https://images.unsplash.com/photo-1653398597887-5005619e8cdc?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774");
});
});
</script>
</body>
</html>
Producción:
-Method-to-Change-Image-on-Hover.webp)
