jQuery – Crear botón imágenes que cambian

Veamos el código necesario para crear un enlace en forma de imagen, que al pasar el botón por encima (hover) cambia a otra imagen. Un ejemplo sería tener una imagen en modo escala de grises y que al pasar por encima, la imagen se mostrara a color:

Meterial necesario

Tendremos dos imágenes boton-off.png y boton-on.png en la carpeta ‘/images/’. El off será a escala de grises, y el off es la misma imagen pero a color.

  • boton-off.png: será la imagen normal.
  • boton-on.png: será la imagen que cambiará cuando pasemos por encima con el cursor del ratón.

Cargamos librería jQuery

Cargamos en el head de la página la liberia jQuery. La versión que corresponda.

1
<script type="mce-text/javascript" src="js/jquery-1.10.2.min.js"></script>

El html en el body

Coloquemos el código que pondrá nuestra imagen en la página. Dentro del Body.

1
<a id="miboton" href="pagina-destino.html"><img alt="Boton" src="images/boton-off.png" /></a>

Hemos colocado la imágen que enlace a una página. Fijaos que le hemos dato un id a la etiqueta ‘a’ del enlace (llamado miboton)

 

El código jQuery que hace el efecto

Podéis ponerlo en el head, o al final de la página antes de cerrar la etiqueta body.

1
2
3
4
5
6
7
8
9
<script type="text/javascript">// <
$(document).ready(function(){
    $("#miboton").hover(function(){
        $("#miboton img").attr("src","images/boton-on.png");
    },function(){
        $("#miboton img").attr("src","images/boton-off.png");
    });
});
></script>

Por un lado podés ver que se ejecutará cuando toda la página está cargada (ready).

Segundo, el código captura el evento hover (cuando pasamos el ratón por encima) del objeto con id=miboton (el enlace).

Una vez capturamos el evento, le pasamos dos funciones:

  • La primera se ejecuta cuando el ratón está encima de la imagen. Cambia el atributo ‘src’ de la imagen que contiene el enlace, por la dirección de la imagen que debe mostrarse cuando está on,
  • La segunda se ejecuta cuando el ratón deja de estar encima de la imagen. Cambia el atributo ‘src’ de la imagen que contiene el enlace, por la dirección de la imagen que debe mostrarse cuando está off,

Conclusiones

Ponemos un enlace con una imagen. Y el código necesario para que la imagen cambie según si estamos encima o no.

Espero que os sea de utilidad

Artículos relacionados

jQuery Plugin MiniJS Notification – Muestra ... Os facilito un enlace a un magnífico plugin que os facilitará la tarea de poner mensajes en vuestra web o aplicación. Un ejemplo claro, sería la oblig...
jQuery – Tutorial 01 – Introducción Pequeño vídeo de unos 4 minutos que nos introduce a la librería jQuery. Qués es? Dónde informarse? Qué podemos hacer con esta librería? En el s...
jQuery – Capturar valor de desplegable y esc... Estrenando nuestro perfil de CodePen.io, vamos a ver un ejemplo en jQuery que trabaja con desplegables (selects) y cajas de texto en formularios. En m...
Efectos de animación con jQuery Aquí os dejo algunos enlaces de efectos de animación que pueden realizarse con la librería jQuery: Glimmer - Animación Free Style  Blend - Anima...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*