Yo propondría lo siguiente que es también de uso común:
1. Crear una imagen vacía de 1x1 y transparente llamada x.gif
2. Agregar la siguiente class de nuestro enlace en CSS:
Código HTML:
a.mienlace {
display: block;
//Aquí pondremos nuestra imagen previa al mouse over:
background: url(imagenes/imagen01.gif) no-repeat;
// Asignar los tamaños de nuestra imagen que tendra el evento:
width: 200px;
height: 100px;
}
a.mienlace:hover {
// Aquí pondremos la segunda imagen que queramos que aparezca
background: url(imagenes/imagen02.gif) no-repeat;
}
3. Insertamos nuestra imagen vacía junto con algún enlace que tendrá la class .mienlace, de este modo:
Código HTML:
<a href="http://www.diseweb.com.mx" class="mienlace">
<img src="imagenes/x.gif" width="200" height="100" alt="Descripción"/>
</a>
Es necesario que agreguemos en el HTML los atributos width y height de nuestra imagen. Además el display: block de la class .mienlace, también es necesario. También la transparencia de nuestra imagen vacía 1x1 es indispensable.