Rollover básico con html y el módulo código de Divi

por | Jul 27, 2017 | Divi, Tutoriales | 5 comentarios

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

importar-imagenes-biblioteca

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.

copiar-url-imagen

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.

modulo-codigo

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: