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

Tutorial Blogger Charkleons.com
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';" />
----------------------------

A continuación les muestro unos ejemplos de botones realizados desde la página COOL TEXT recomendada por Charkleons.com; en esta página al finalizar la edición del botón o logo nos brindan el código ya completo, y solo quedaría a gusto de cada quien reemplazar las URL de las imágenes por sus propias URL:




Tamié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 imagenes tengan diferentes medidas o sean muy grandes) 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.



Código para poner dos imágenes en una, código onmouseover para blogger, 2 imágenes en 1 para blogger, imagen que cambia en blogger, tutorial imagen que cambia en blogger,