Cambiar una imagen al pasar el ratón por encima
Una manera de dar un toque personal a tu página web es cambiar una imagen cuando el internauta pasa el ratón por encima, es decir, si un usuario pasa el puntero de su ratón por encima de una imagen, aparecerá una imagen diferente. Es útil por ejemplo para mostrar un antes y un después. Para hacerlo debes acceder al código HTML pero no te preocupes, es muy sencillo.
Te damos las claves para hacerlo fácilmente.
HTML: ¿qué es?
- El HTML (HyperText Markup Langage) es un lenguaje informático que permite traducir el lenguaje hipertexto.
- Puedes acceder al lenguaje HTML de cualquier texto que escribas en tu página web haciendo clic en el botón Editor HTML o en Fuente HTML.
Sube las imágenes o fotos al espacio de almacenamiento
El primer paso es subir al espacio de almacenamiento (Archivos) las imágenes que quieres utilizar. Así podrás obtener sus URLs.
Copia la URL de las imágenes o fotos
Para saber dónde encontrar la URL de un archivo consulta el tutorial Obtener la URL de un archivo. Cópiala para poder pegarla después en el código HTML.
Copiar y pegar este código
Copia el siguiente código:
<p><img alt="Cambiar imagen" height="198" onmouseout="this.src='https://www.emiweb.es/medias/images/imagen1.png';" onmouseover="this.src='https://www.emiweb.es/medias/images/imagen2.png';" src="https://www.emiweb.es/medias/images/imagen1.png" /></p>
Pega este cógido en el editor HTML en la zona en la que quieras incluir la imagen que cambiará al pasar el ratón por encima.
Ya conoces el código HTML, ahora debes cambiar las imágenes de nuestro ejemplo por las URLs de las imágenes que quieres utilizar.
Cambiar las URLs
Busca en el código las 3 URLs que ves aquí abajo en negrita:
- 1) onmouseout="this.src='https://www.emiweb.es/medias/images/imagen1.png';" = Imagen verde
- 2) onmouseover="this.src='https://www.emiweb.es/medias/images/imagen2.png';" = Imagen blanca
- 3) src="https://www.emiweb.es/medias/images/imagen1.png" = Imagen verde
Las URLs 1 y 3 son la misma, corresponden a la imagen de base, la que se ve al acceder a la página.
La URL 2 es la imagen que aparece al pasar el ratón por encima.
Reemplaza las URLs 1 y 3 por la URL de la imagen de base. La URL 2 debes reemplazarla por la URL de la imagen que quieres que aparezca al pasar el ratón por encima.
IMPORTANTE: al editar el código, presta mucha atención a cambiar sólo las URLs sin alterar el resto. La URL de una imagen comienza por "http" y termina con la extensión del archivo, normalmente ".png" o ".jpg".
Cambiar el "alt" de la imagen
Al principio del código verás el atributo alt: alt="Cambiar imagen". Debes cambiarlo e indicar una palabra relacionada con la imagen o con la temática de la página.
No olvides sustituir las palabras "Cambiar imagen" por la palabra o palabras relacionadas con tu contenido. Para terminar, haz clic en el botón Guardar.