Anteriormente vimos como Cambiar un Texto por otro al pasar el cursor del Mouse utilizando el Efecto Hover, ahora les quiero enseñar lo mismo pero utilizando una imágen.
Te muestro un ejemplo, pasa el cursor de tu mouse por la siguiente imágen.
Basta con que copiemos y peguemos el siguiente código en una Entrada, Página Estática o Elemento HTML.
<img onmouseout="this.src='imágen nro 1';" onmouseover="this.src='imágen nro 2';" src="imágen nro 1" />
Debes sustituir Imágen nro 1 e Imágen nro 2 por las URL respectivas de su alojamiento.
Si bien hay otras maneras de poder hacerlo, esta es la forma más simple, recomiendo que utilices imágenes del mismo tamaño para que quede bien.
Si quieres alinear la imágen puedes utilizar los siguientes códigos de inicio y cierre:
- Para centrar la Imágen comienza con <center> y cierra </center>
- Para llevar a la izquierda comienza con <left> y cierra </left>
- Para llevar a la derecha comienza con <right> y cierra </right>
