641 50 40 46 · hola@seoenunclick.com

Cambiar la imagen al pasar por encima el ratón WordPress

Para que una página web llame la atención, cada vez es más frecuente añadirle efectos tanto al texto como a las imágenes.

Si lo que queremos es que al pasar el ratón por encima de una imagen, esta cambie por otra, tenemos que añadir un código sencillo.

<p><img alt=»Cambiar imagen» height=»198″ onmouseout=»this.src=’https://www.seoenunclick.com/medias/images/imagen1.png’;» onmouseover=»this.src=’https://www.seoenunclick.com/medias/images/imagen2.png’;» src=»https://www.seoenunclick.com/medias/images/imagen1.png» /></p>

Para cambiar la imagen al pasar por encima con el ratón, lo primero que tienes que hacer es identificar en el código las 3 URLs:

  • 1) onmouseout=»this.src=’https://www.seoenunclick.com/medias/images/imagen1.png‘;»
  • 2) onmouseover=»this.src=’https://www.seoenunclick.com/medias/images/imagen2.png‘;»
  • 3) src=»https://www.seoenunclick.com/medias/images/imagen1.png»

Sustituye la URL que de la imagen 1 y la imagen 3 por la imagen que quieras mostrar el primer lugar . En la URL que hace referencia a imagen 2, coloca la url de la imagen que se mostrará al pasar por encima de la primera.

También puedes sustituir el ALT de la imagen y poner el texto que prefieras

Os dejo un ejemplo:

Diseño web