quiero un botón con efecto rollover

[newnoi]

Tengo un botón que es una imagen, y quiero que al poner el ratón encima cambie a otro botón que tiene un aspecto distinto pero el mismo tamaño.
Quiero hacerlo con HTML y CSS
adjunto mi html, y css a ver si me podeis indicar donde me equivoco ya que soy novato.
HTML
<div id="gratuit">
<a href="contactar/contactar.html"><img src="objetos/diagnostic.gif"
alt="boton contactar"/></a>
</div>

CSS
#gratuit {float:center; height:40px; margin-left:30px;
width: 710px;
;background-repeat:no-repeat; background-position:center;}

#gratuit a{background-image:url(objetos/diagnostic.gif); display:block
;background-repeat:no-repeat; background-position:center;}
#gratuit a:hover{background-image:url(objetos/diagnosticover.gif); display:block
;background-repeat:no-repeat; background-position:center;}

[ZoroRoronoa]

Usa sprites.
Busca en google CSS Sprites y te saldran miles de tutoriales para lograr lo que deseas.

Saludos

[newnoi]

Mi pregunta es saber donde me equivoco para que no funcione el cambio de imagen al poner el cursor encima, usando HTML y CSS.
acaso no se puede hacer?

[IsaBelM]

te has molestado en buscar por los términos css sprite?? ya lo hago yo por tí

[safe]

La solución rápida a lo que preguntas es:

Código:

<div id="gratuit">
    <a href="contactar/contactar.html">Contactar</a>
</div>

CSS
#gratuit { float:center; height:40px; margin-left:30px; width: 710px; }

#gratuit a {background:url(objetos/diagnostic.gif) no-repeat center center; display:block; }
#gratuit a:hover{background-image:url(objetos/diagnosticover.gif); }

Pero la solución más correcta, es como te han dicho antes. En vez de utilizar dos imagenes diferentes, utilizas una sola que contenga los dos estados y lo que cambias al hacer el hover, es la posición de la imagen. De esa forma, al cargarse los dos estados en la misma imagen, no hay un instante en que pueda no verse ninguna imagen, hasta que se carga la segunda.

[newnoi]

Ruego me perdoneis si he parecido molesto por vuestra respuesta.
He seguido vuestra sugerencia de hacerlo con css sprite y me ha funcionado bien. Lo que me ha costado mas es hacer con paint.net la imagen total pero lo he logrado generando primero un frame de la suma de dimensiones, y luego importando las imagenes como layers y colocandolas en su sitio.
tengo tambien agradeceros que me hayais enviado la solucion sin sprite
Muchas gracias de un novato agradecido