Cómo hacer un hover con WordPress

Imagen de sustitución en post o páginas

Puedes editar cualquier post o página existente que tengas en tu WordPress o crear uno nuevo y entre el texto, en la parte donde quieras que se muestre, añades un código que tenga la siguiente sintaxis que te detallo debajo para que la entiendas mejor:

<a href="URL de destino" target="_top" onmouseover="document.sub_but.src='https://dominio.com/imagen_de_reemplazo.jpg'" onmouseout="document.sub_but.src='https://dominio.com/imagen_normal.jpg'"> <img src='https://dominio.com/imagen_normal.jpg' style="width:900px; height:320px; border:0px solid #cc3300;" alt="Pasa el ratón para cambiar la imagen" title="Pasa el ratón para cambiar la imagen" name="sub_but"></a>

Hacemos uso de la clase mouseover, y mouseout.

Desglosando el código…

  • URL de destino: Es la URL a la que quieres que enlace la imagen.
  • target=”_top”: Abre el enlace en la misma ventana. Opciones: _blank (nueva ventana).
  • http://dominio.com/imagen_de_reemplazo.jpg: Es la url de la imagen que se muestra al pasar el ratón sobre ella. Para saber cual es la URL de la imagen, primero ve al menú “Media” de WordPress, carga tus imágenes previamente tratadas y mejor que estén al mismo tamaño. Luego haz click en una de ella y copia la URL que será la que pegarás sustituyendo este trozo de código.
  • http://dominio.com/imagen_normal.jpg: Es la url de la imagen que se muestra cuando no hay evento de ratón sobre la imagen. (Hay que invocarla 2 veces en el código). Para obtener la URL haz lo mismo que en la anterior.
  • alt/title: Importante para tu SEO on page.
  • style=”width:XXpx; height:XXpx;: Ancho y alto de la imagen a mostrar (lo ideal es que sean iguales o similares en tamaño). Si las imagenes originales están al mismo tamaño aquí puedes pones 100%.

Para poder incrustar el código en WordPress añadiremos un bloque de Custom HTML (HTML personalizado) y pegaremos el código de arriba sustituyendo correctamente los datos arriba explicados. Aquí está el código que yo he utilizado:

Ejemplo, pasa el ratón por encima de la imagen:

Pasa el ratón para cambiar la imagen

Ejemplo con maquetación a doble columna.

Imágenes de ejemplo: