641 50 40 46 · hola@seoenunclick.com
Empresa de diseño web

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