Print Friendly and PDF

2 Imágenes en 1 - Efecto básico HTML


Han visto que hay imágenes que al poner el puntero del mouse sobre ellas cambian, como botones o logos, esto se realiza con un código básico para las imágenes en HTML, con el cual también podemos por ende mostrar dos imágenes diferentes. El código base es el siguiente:


----------------------------
<img src="URL Imagen que se visualiza" onmouseover="this.src='URL Imagen que cambia con Mouse';" onmouseout="this.src='URL Imagen que se visualiza';" />
----------------------------


Videotutorial del año 2012

También se puede hacer con imágenes comunes, y además podemos redireccionarlas; le voy a agregar de una vez el código para que se abra en otra pestaña o ventana, también podemos definir su tamaño con las etiquetas width="200" y height="200" opcional en caso de que las imágenes tengan diferentes medidas o sean muy grandes, ya que pueden dejar solo el width y los navegadores asumen automáticamente el height. El codigo quedaría así:
----------------------------
<a href="URL que redirecciona" target="_blank"><img src="URL Imagen que se visualiza" onmouseover="this.src='URL Imagen que cambia con Mouse';" onmouseout="this.src='URL Imagen que se visualiza';" width="200"  height="200" /></a>
----------------------------


Como se pueden dar cuenta es un efecto muy básico que nos permitirá ahorrar espacio en la presentación de una entrada e innovar al mismo tiempo.

Espero que esta información les sea muy útil.

Gracias.

No hay comentarios:

Publicar un comentario

Gracias por comentar.

Charkleons.com