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: