Hoy os traigo un efecto visual que al pasar el ratón por encima de una imagen, está se hace más grande.
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdJ_pz46JHuliMN6NugdsyMxt5G6GUTgSUMupToZv-6sNk9rISnSVQ6mL9z9u9YHiJEzjZWQxloaK0bKAT3IA2QrrF40mgnD7QHNTZF4JdEv9wbG3i5T5fnd-7LPgKr59XBAoKvCP8ZjiB/s320/agrandar_imagen_al_pasar_el_raton.png)
El código es muy sencillo, lo haríamos de la siguiente manera:
- <img src="aquí la url de la imagen" onmouseover="this.width=x0;this.height=x0;" onmouseout="this.width=x1;this.height=x1;" width="x2" height="x2" alt="agrandar imagen al pasar el ratón" />
Pondremos el ancho(width) y el alto(height) de la imagen a nuestro gusto, modificaremos los siguientes parámetros:
x0 = pondremos los px de imagen, tanto ancho como alto, este será el tamaño de imagen cuando esté el ratón encima.
x1 = pondremos los px de la imagen para cuando salgamos con el ratón fuera de la imagen.
x2 = pondremos los px de la imagen que se mostrará en primer lugar.
Y se veía así(Lo he exagerado para que se aprecie bien el cambio):
![agrandar imagen al pasar el raton](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiiwEXuQ3g-vgKvIwngeQYZG4XaB031nBtgXmDtQGfnoXu45WsPz1AiflWeRu6XE_TSIICBvQNyVd75LJh9JX_TNrg73S_4Qi1uDJvDuNNG3ymENkm4mlZQCdFHgfk98NuxjEmYSHRBkseb/h120/cambiar_imagen_con_html.png)
Espero que os sea de utilidad, si tenéis dudas, consultar.
Un saludo.
No hay comentarios:
Publicar un comentario