CSS: Cambiar la imagen de un div con enlace “onmouseover”

Supongamos que tenemos una imagen que hará de enlace y que queremos que cambie cuando pasamos el ratón sobre ella.

Por ejemplo si tenemos un enlace en una celda de una tabla, en lugar de <td><a><img/></a></td>, lo haremos de la siguiente manera:

<td>
<div id="enlace">
<a href="http://www.tuscerosymisunos.es"></a>
</div>
</td>

Y en nuestro CSS tendremos:

div#enlace a{
	float:left;
	width:205px;
	height:27px;
	background-image:url(img/enlace_off.gif);
	background-repeat: no-repeat;
}
div#enlace a:hover{
	background-image:url(img/enlace_on.gif);
	background-repeat: no-repeat;
}

Señalar que aparece el tamaño de las imágenes (preferiblemente serán del mismo tamaño) y la ruta a las mismas (en este caso están en el directorio img y son imagen_off.gif e imagen_on.gif).

Y con este sencillo truco nos podemos librar de los javascript para realizar esta tarea.