Cambiar la imagen al pasar el ratón por encima en el blog de WordPress
Cuando uno se acostumbra a la interfaz gráfica y al editor WYSIWYG de WordPress, ciertas tareas que requieren modificación directa del código HTML pueden parecer complicadas.
Un ejemplo de ésto sería la publicación en un artículo de una imagen que se cambia por otra diferente al pasar el ratón sobre ella (evento onmouseover) y vuelve a la original al sacar el cursor de la imagen (evento onmouseout).
WordPres no tiene incluida esta opción en la herramienta de publicación y modificación de imágenes pero desde el editor HTML podemos configurarla fácilmente. En primer lugar hemos de subir al servidor las 2 imágenes que deseamos intercambiar (en este ejemplo finder1.png y finder2.png). Insertamos una de ellas y vamos al editor HTML para obervar cómo queda el código de la etiqueta IMG:
<img class="alignnone size-full wp-image-5813" title="finder1" src="https://perez987.es/wp-content/uploads/2011/12/finder1.png" alt="" width="180" height="180" />
De este código nos interesa la ruta de la imagen en el servidor
https://perez987.es/wp-content/uploads/2019/05/iconfinderx512.png
y el tamaño width=»180″ height=»180″, con esos datos crearemos el código que permite intercambiar las imágenes.
En el editor HTML reemplazamos la etiqueta IMG creada automáticamente por WordPress con éste otro código (nos referimos a la imagen como this de forma que el código javascript permite asignar el origen de la imagen con la propiedad src, cambiándolo según el evento del ratón):
<img title="this" onmouseover="this.src='https://perez987.es/wp-content/uploads/2011/12/finder2.png';" onmouseout="this.src='https://perez987.es/wp-content/uploads/2011/12/finder1.png';" src="https://perez987.es/wp-content/uploads/2011/12/finder1.png" alt="" width="180" height="180" />