Rollover de imágenes en WordPress sin plugins

Una estrategia a menudo usada en marketing de contenidos es exhibir imágenes a los visitantes o lectores de tu sitio WordPress que muestren un contenido y al pasar el ratón por encima de ellas cambien su apariencia o mensaje como por ejemplo una llamada a la acción. Eso se llama rollover de imágenes en WordPress y aquí te explico como usarlo.

Piensa en el rollover de imágenes como una herramienta para potenciar ideas o contenidos y verás en ella un filón para mejorar tus CTAs y convertir visitas en resultados, pues te ayudarán a captar la atención de los visitantes al interactuar con ellos.

Básicamente se trata de mostrar una imagen con determinado contenido, más bien pasivo, que al pasar el ratón sobre ella (efecto rollover) cambia por otra imagen con un contenido más activo o llamativo.

Este tipo de inbound marketing es poco intrusivo y no resulta molesto a los visitantes que acaban interactuando con el, y si además culmina en un enlace y hacen clic, el objetivo se habrá cumplido.

La idea es que puedes utilizar imágenes de sustitución en post, páginas o widgets en WordPress sin necesidad de hacer uso de plugins o modificaciones en functions.php y que con ello añadas interactividad a determinadas imágenes convirtiéndolas en llamadas de atención o acción.

Claro que existe algún plugin, como por ejemplo IMG Mouseover, en el directorio de plugins de WordPress.org, pero en este caso lleva 2 años sin actualizar y si bien no se han detectado vulnerabilidades para el mismo, hay que usarlo con las debidas precauciones.

Lo dicho, vamos a utilizar imágenes sustitutivas en WordPress sin instalar nada, ni adicionar peso extra en el sitio web.

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, le pasamos la ruta de la segunda imagen con la marca oversrc.

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.
• 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).
• 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).

Ejemplo practico:

<a href="http://demos-wordpress.webempresa.com/helena/" target="_top" onmouseover="document.sub_but.src='https://pruebas.webempresa.eu/wpencelado/wp-content/uploads/galeria2.jpg'" onmouseout="document.sub_but.src='https://pruebas.webempresa.eu/wpencelado/wp-content/uploads/galeria1.jpg'"> <img src='https://pruebas.webempresa.eu/wpencelado/wp-content/uploads/galeria1.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>

Nota: Puedes probarlo para verificar el funcionamiento, pero no de forma continuada ya que no es recomendado que hagas hotlinking de imágenes externas ajenas a tu Hosting.

A partir de aquí podrás empezar a experimentar diversas formas de rentabilizar mejor las imágenes que utilizas en tus post, páginas o widgets, usando (no abusando) imágenes de reemplazo con mensajes o llamadas a la acción para motivar a tus visitantes.