como hacer que las imagenes cambien cuando pasa el raton por encima sin javascript

[sergiozx]

Te aconsejo que sigas la seccion de css sprites del tutorial de Isabel ya que es la manera más profesional.

De todos modos si crear un sprite es demasiado avanzado para ti, te aconsejo que lo hagas con diferentes imágenes a través de la etiqueta background.
Por ejemplo para un botón:

Código PHP:

<a class="boton" href="http://example.com">Descarga</a>
 

Código CSS:

.boton {background:url(http://example.com/img/boton-off.png)}
.boton:hover {background:url(http://example.com/img/boton-on.png)}
 

Ahí lo hemos aplicado a un enlace. Pero lo puedes hacer a otro elemento, por ejemplo a un div:

Código PHP:

<div class="cambiodefondo"> </div>
 

Código CSS:

.cambiodefondo {
background:url(http://example.com/img/boton-off.png);
width:400px;
height:300px;
}
.cambiodefondo:hover {
background:url(http://example.com/img/boton-on.png);
}