Efecto Rollover en las imágenes

Algo que me ha llamado mucho la atención es el uso en algunos blogs del mencionado efecto rollover en las imagenes que consiste en que al pasar el puntero del ratón por encima éstas cambien. :cool: Sólo tenemos que añadir unas lineas a la hoja de estilos (CSS). Sería algo cómo esto antes de:

]]></b:skin>

añadimos esto:

.rollover a { background-color: #FFF; display: block; height: valorpx; /* la altura de la imagen */ margin: 0 auto; width: valorpx; /* el ancho de la imagen */ } .rollover a:hover { } .rollover a:hover img { background: transparent; visibility: hidden; }

Después sólo es cuestión de añadir los enlaces de las imagenes a esta pequeña porción de codigo Html para añadir ya sea en nuestros posts, botones, etc.

<img src="URL_laImagen" onmouseover="this.src = 'URL_segundaImagen';" onmouseout="this.src = 'URL_primeraImagen';" />

El resultado sería algo así

Mas información en Vagabundia