Rollover básico con html y el módulo código de Divi
Sustituir una imagen por otra en Divi
Después de un tiempo sin nuevos tutoriales por cuestiones profesionales, volvemos al tajo con una sencilla práctica usando un poquito de html en un módulo de código de divi. Sustituir una imagen por otra en Divi para crear un sencillo rollover.
Puedes ver cómo quedará nuestro ejercicio al final del post.
Importar las imágenes
Imágenes importadas
En primer lugar vamos a importar nuestras imágenes. Para esta práctica necesitamos dos, una que es la que aparece por defecto y la segunda, la imagen que sustituirá a ésta cuando el cursor del mouse esté sobre la imagen inicial.
Como puedes ver en la imagen a la izquierda de estas líneas, hemos importado nuestras fotografias a la biblioteca. Hemos elegido una imagen de limas en blanco y negro y la misma en color como imagen de sustitución.
Recuerda optimizar tus imágenes y añadirles una descripción y título alternativo. Como sabes, esto contribuirá a aumentar el SEO de tu web.
Una vez hemos importado nuestras imágenes, selecciona cada una de ellas y busca a la derecha de la imagen el campo URL y cópialo. Una buena idea es copiarlo y pegarlo en un archivo básico de texto, por ejemplo en el bloc de notas. Cuando tengas las URLs copiadas ya estaremos listos para el último paso.
Copia la url de cada imagen
Creamos el módulo
Después de crear una nueva entrada y activar el constructor Divi, inserta un módulo tipo «código» (1) en donde quieras poner tu imagen de sustitución. Cuando lo generes, te va a aparecer el panel de ajustes del módulo.
El módulo código
Ya sólo nos falta añadir el código html en la zona contenido (2) del módulo y estará listo.
Copia el código CSS
Aquí tienes el código html que te proporcionamos y que pegaremos en el campo contenido como puedes ver en la imagen superior.
<a href="direccion url"><img src="URL1" onmouseover="this.src='URL2'" onmouseout="this.src='URL1'"></a>
Ten mucho cuidado con las comillas, si te «comes alguna no funcionará correctamente (ni incorrectamente, no funcionará).
Sustituye donde pone URL 1 por la url de la imagen inicial y URL2 por la imagen de destino. Algo así como http://www.tudominio.como/foto.jpg
Y listo, ya tienes tu rollover creado.
Puedes seguir esta práctica en un videotutorial si lo deseas:
Me sirvió mucho, lo único que al pasar el mouse por la foto se «hace manito» y al clickear me lleva a una página inexistente. Como se puede evitar esto?
Hola, María
Asegúrate de que has puesto correctamente las url, no deberías tener problemas. Pruebas primero las urls antes de ponerlas para comprobar que son correctas
pd: no entiendo lo que quieres decir con «se hace manito», si es que aparece el cursor de la mano es normal.
Saludos
Hola, me ayudo demasiado!! solo hay un detalle, que tengo que mantener el cursor del mouse por unos segundos para que se aplique el rollover, después de eso ya funciona bien, pero si vuelvo a cargar la pagina, pasa lo mismo. Como lo puedo solucionar?
Gracias, David!
Acabo de probarlo y no he notado ningún retardo. Tal vez haya alguna animación activada o algún código que se ejecuta en tu pagina al cargarse.
Un saludo
Hola! Muchas gracias! Aunque he seguido los pasos varias veces y no consigo que salga. La única diferencia que encuentro con el tutorial es que en mi ventana de código, en el cuadro, aparece un 1 al principio, y además no me da la opción para pegar, tengo que teclear (control v) para poder añadir los códigos.
No sé si porque será otra versión de Divi… ¿El proceso sería distinto?
Gracias!